Question

我有一个jquery elemnt s，我需要插入另一个元素

 var s = $('div').html('<button class="mdl-button"></button>');
    var x = s.html('< i class="material-icons" >&#xE834;</i>');
    var a=x.addClass('.mdl-color-text--green-600');

然后将css类应用于内部html

var t=s.html('<i class="material-icons" >&#xE5CA;</i>');

但最后它只返回

< i class="material-icons" >&#xE834;</i>

没有周围的潜水。

Answer 1

使用jQuery创建元素，因此您可以引用它们

var button = $('<button />', { // create a "button"
        'class' : 'mdl-button'
}),
    i = $('<i />', {           // create a "i"
        'class' : 'material-icons',
        html    : '&#xE834;'
});

$('div').empty().append(button, i); // add elements to DOM

i.addClass('.mdl-color-text--green-600'); // add another class to an element

Answer 2

从概念上讲，我认为在纯JavaScript中看到它可能会有所帮助。 jQuery在html命令的后台执行这些操作。

  // First Get your Selector
  let s = document.querySelector('div');
  // Create your element and add any necessary details
  let b = document.createElement('button');
  b.className = 'mdl-button';

  // create your icon and add details
  let i = document.createElement('i');
  i.className = 'material-icons mdl-color-text--green-600';
  i.innerText = "&#xE834;";

  // add icon to button, and button to div element
  b.appendChild(i);
  s.appendChild(b);

在您的尝试中，您正在对同一元素执行多项操作，这会导致它们被覆盖。相反，你会想要创建元素然后追加它们。

// get your root element, build button and icon
let baseElement = $('div')
,   button = $('<button>').addClass('mdl-button')
,   icon = $('<i>').addClass('material-icons mdl-color-text--green-600').text('&#xE834;');

// append elements
button.append(icon);
baseElement.append(button);

Jquery用jquery在元素内添加元素

2 个答案: