How to add svg in html, using JavaScript DOM?

Question

I want to add svg image via DOM manipulation, instead of adding them in HTML DIV?

I have tried everything by googling but couldnot find any better solution for it. Instead of 'X' i want to insert the svg image (assets/close.svg) inside the span element. which is inside the 'studentDetails' Div. Will be grateful for your help.

HTML:

<div id="studentDetails" class="hidden"></div>

javascript:

var studentDetails = document.getElementById('studentDetails');
var favouriteStudent = 
    contacts[parseInt(e.currentTarget.id)].favourite ? 'favourite' : '';
studentDetails.innerHTML =
    "<span id='close-details'>x</span>" +
    "<span id='favourite' class='" +
    favouriteStudent +
    "'>*</span>" +
    '<div>' +
    contacts[parseInt(e.currentTarget.id)].name +
    '</div>' +
    '<div>' +
    contacts[parseInt(e.currentTarget.id)].email +
    '</div>';
studentDetails.setAttribute('class', 'hidden');

CSS:

#close-details {
    display: block;
    float: right;
    font-size: 20px;
    margin-top: -8px;
    background-image: url('assets/close.svg');
    background-repeat: no-repeat;
    background-position: right;
}

Have you tried the answers in this question: stackoverflow.com/questions/14068031/… — aptriangle
– aptriangle, Commented Feb 7, 2019 at 10:05

PranshuKhandal · Accepted Answer · 2019-02-07 11:27:39Z

1

this might help, as you can simply add svg using IMG tag:

var studentDetails = document.getElementById('studentDetails');
var favouriteStudent = 
  contacts[parseInt(e.currentTarget.id)].favourite ? 'favourite' : '';
  studentDetails.innerHTML =
  "<span id='close-details'><img src='assets/close.svg'></span>" +
  "<span id='favourite' class='" +
  favouriteStudent +
  "'>*</span>" +
  '<div>' +
  contacts[parseInt(e.currentTarget.id)].name +
  '</div>' +
  '<div>' +
  contacts[parseInt(e.currentTarget.id)].email +
  '</div>';

i have made an edit in line 5 as you see i replaced X with the image tag..

edited Feb 7, 2019 at 11:27

answered Feb 7, 2019 at 10:06

PranshuKhandal

8991 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PranshuKhandal Over a year ago

i hope it helped :)

Collectives™ on Stack Overflow

How to add svg in html, using JavaScript DOM?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related