Question

我添加了一个代码来在文本后添加一个asterik（其中包含css类）。代码运行时，它显示代码而不是正在处理的html。代码：

jQuery(document).ready(function(){
    document.getElementById("billing_state_field").getElementsByTagName('label')[0].after("<abbr class='required' title='required'>*</abbr>"));
});

输出：

<label for="billing_state" class="">STATE / COUNTY / PROVINCE / EMIRATE</label>
&lt;abbr class='required' title='required'&gt;*&lt;/abbr&gt;

Answer 1

如果您正在使用jQuery，为什么不充分利用它？

而不是使用

condocument.getElementById("billing_state_field").getElementsByTagName('label')[0]

使用$("#billing_state_field label",condocument).eq(0)

根据评论中的要求，我将.after( ... )更改为.html( .html() + ... )

＆＃13;

$("#billing_state_field label").eq(0).html($("#billing_state_field label").eq(0).html() + "<abbr class='required' title='required'>*</abbr>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billing_state_field">
  <label>Test </label>
</div>

＆＃13;

Answer 2

after函数不会使用HTML string，而是DOM element或原始文本。

因此，您对after的调用应如下所示：

jQuery(document).ready(function(){
  var abbr = document.createElement("abbr");
  abbr.setAttribute("class", "required");
  abbr.setAttribute("title", "required");
  abbr.innerText = "*";

  document.getElementById("billing_state_field").getElementsByTagName('label')[0].after(abbr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billing_state_field">
  <label for="billing_state" class="">STATE / COUNTY / PROVINCE / EMIRATE</label>
</div>

以下是MDN上after功能的文档：https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

Answer 3

你可以使用JQuery来做到这一点：

＆＃13;

jQuery(document).ready(function(){
    $('#billing_state_field').find('label:eq(0)').after("<abbr class='required' title='required'>*</abbr>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='billing_state_field'>
<label for="billing_state" class="">STATE / COUNTY / PROVINCE / EMIRATE</label>
</div>

＆＃13;

Answer 4

我假设您要在<abbr>标记中添加<label>标记。

jQuery和Vanilla JavaScript有两种方式。

要显示jQuery和javaScript的两种方式，我使用两个不同的div。

1） #cnount_state_field_1 // jQuery

2） #cnilling_state_field_2 // javaScript

＆＃13;

// jQuery
$('#billing_state_field_1 label').append("<abbr class='required' title='required'>*</abbr>");


// javaScript
var billing_state_lbl = document.querySelector('#billing_state_field_2 label');
    node = document.createElement('abbr'); // Create element node
    textNode = document.createTextNode('*'); // Create text node
node.classList = "required"; // Add class
node.appendChild(textNode); // Add text node to element node 
node.setAttribute('title','required'); // add attribute on element node 
billing_state_lbl.appendChild(node); // Append newly created element node

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Handle by jQuery -->
<div id="billing_state_field_1">
    <label for="billing_state">STATE / COUNTY / PROVINCE / EMIRATE - 1 </label>
</div>

<br>

<!-- Handle by javaScript -->
<div id="billing_state_field_2">
    <label for="billing_state">STATE / COUNTY / PROVINCE / EMIRATE - 2 </label>
</div>

＆＃13;

after（）显示解析的html

4 个答案: