Как добавить самозакрывающийся тег с помощью jQuery?

Question

Мне было интересно, как я могу создать и добавить элемент, который является самозакрывающимся, например тег <img src="" /> или что я хочу <circle cx="" cy"" /> из элемента SVG.

UPDATE: Когда я использую следующие methodes она автоматически закроет его </circle> вместо />.

$('svg').append('<circle>'); 
$('svg').append('<circle/>'); 
$('svg').append('<circle />'); 
$('svg').append('<circle cx="" cy="" />'); 

Все фрагменты кода сильфонные создаст следующий результат:

<circle></circle> 

смотреть на некоторые советы. Заранее спасибо.

Answer 1

Любой тип элемента создается как же в JQuery, но вы говорите, что он автоматически добавляет закрывающий тег, который может быть не действителен один .. Используется как ниже -

$('svg').append('<circle><circle/>'); 

Самозапирающийся

$('svg').append('<circle cx="" cy="" />'); 

ИЛИ ЛУЧШИЙ СПОСОБ APPEND просто, как -

var html =""; 
html +="<circle>"; 
//you in between codes ; 
html +="<circle/>"; 

ИЛИ

var html =""; 
html +="<circle cx='"+300+"' cy='"+300+"' />"; 

Наконец

$('svg').append(html); 
$('body').html($('body').html()); // A trick to refresh to overcome issues 

Answer 2

самозакрывания природа определяется в пространстве имен, так что это будет в значительной степени зависеть от того, как вы читаете вывод кода. С точки зрения Dom нет никакого атрибута — на узле —, который указывает «автозакрытие». Поэтому, если вы думаете об этом, это может быть применено только при рендеринге Dom до вывода строки и должно решаться рендерером.

Если вы используете инспектора вашего современного браузера для просмотра элемента SVG (с правильным пространством имен), вы увидите, что элементы круга отображаются как автоматически закрытые. Тем не менее, с той же настройкой (но с неправильным пространством имен) — не только ваш SVG не отображается —, вы увидите, что инспектор рассматривает его как HTML. В HTML нет спецификации для circle, поэтому она будет просто отбрасываться по умолчанию. Который должным образом закрыт.

правильно Пространство имен

var body = jQuery('body'), 
    svg = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'svg')), 
    cir = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'circle')); 
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'}); 
svg.attr({ 
    viewBox: "0 0 120 120", 
    version: "1.1", 
    xmlns: "http://www.w3.org/2000/svg" 
}); 
svg.appendTo(body); 
svg.append(cir); 

некорректное Пространство имен

var body = jQuery('body'), 
    svg = jQuery('<svg>'), 
    cir = jQuery('<circle>'); 
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'}); 
svg.attr({ 
    viewBox: "0 0 120 120", 
    version: "1.1" 
}); 
svg.appendTo(body); 
svg.append(cir); 

Независимо от того, как вы создали свой Dom однако, я могу поспорить, вы используете какую-либо функцию или атрибут, который упоминает «HTML «чтобы посмотреть источник вашего строительства. Я обнаружил, что независимо от того, насколько хорошо я строю свой SVG (с правильными пространствами имен), если я использую .innerHTML(или .html() jQuery, который в основном такой же) результат будет с соответствующими закрывающими тегами. Это потому, что вы просите браузер отобразить его как HTML, так что вы получите ту же проблему.

Я подтвердил вышеуказанное, даже используя D3 для настройки структуры.

console.log(svg.get(0).innerHTML); // <circle></circle> 

Что вам нужно .innerSVG или что-то подобное.

Общий вопрос должен быть, однако, — что вы на самом деле пытаетесь сделать. Если нужно построить что-то, что правильно экспортирует источник SVG, тогда это может быть желательно —, но я не могу придумать другую причину. Закрытое или автоматическое закрытие не влияет на поведение самой разметки.

Answer 3

Чтобы добавить переменные в само закрытие, попробуйте это. .

var image_src = "https://i.imgur.com/nzWpgJ1.jpg" 
 
$(".js-preview").html($('<img />', {src: image_src}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="js-preview"></div>