Как добавить SVG в HTML, используя JavaScript DOM?

Question

Я хочу добавить изображение SVG с помощью DOM-манипуляции, вместо того, чтобы добавлять их в HTML DIV?

Я пробовал все путем поиска в Google, но не смог найти лучшего решения для этого.Вместо 'X' я хочу вставить изображение svg (assets / close.svg) внутри элемента span.который находится внутри Div 'studentDetails'.Буду благодарен за вашу помощь.

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;
}

Answer 1

это может помочь, так как вы можете просто добавить svg, используя тег IMG:

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>';

Я выполнил правку в строке 5, как вы видите, я заменил X на тег изображения ..