Javascript Jquery使用Jquery在元素内部添加元素

我有一个jquery元素，需要插入到另一个元素中

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

var s=$（'div'）.html（“”）；
var x=s.html（“；”）；
var a=x.addClass（'.mdl彩色文本--green-600'）；

然后将css类应用于内部html

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

var t=s.html（'；'）；

但最后它只会回来

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

&xE834；

---

没有包围潜水的元素。

而是使用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

var-button=$（''，{//创建一个“按钮”
“类”：“mdl按钮”
}),
i=$（''，{//创建一个“i”
“类”：“材质图标”，
html:“；”
});
$（'div'）.empty（）.append（按钮，i）；//向DOM添加元素
i、 addClass（'.mdl彩色文本--green-600'）；//向元素添加另一个类

改用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

var-button=$（''，{//创建一个“按钮”
“类”：“mdl按钮”
}),
i=$（''，{//创建一个“i”
“类”：“材质图标”，
html:“；”
});
$（'div'）.empty（）.append（按钮，i）；//向DOM添加元素
i、 addClass（'.mdl彩色文本--green-600'）；//向元素添加另一个类

从概念上讲，我认为在纯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 = "";

  // 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);

//获取根元素、构建按钮和图标
让baseElement=$（'div'）
，button=$（''）.addClass（'mdl-button'））
，icon=$（''）.addClass（'material-icons mdl color text--green-600'）。text（'；'）；
//附加元素
按钮。追加（图标）；
baseElement.append（按钮）；

从概念上讲，我认为在纯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 = "";

  // 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);

//获取根元素、构建按钮和图标
让baseElement=$（'div'）
，button=$（''）.addClass（'mdl-button'））
，icon=$（''）.addClass（'material-icons mdl color text--green-600'）。text（'；'）；
//附加元素
按钮。追加（图标）；
baseElement.append（按钮）；

我认为您不了解如何工作。变量s、x、a和t都是同一个元素，我想你不明白它们是如何工作的。变量s、x、a和t都是相同的元素。