如何用JavaScript替换空的html标签？

Question

我有一些代码想要插入或替换为所需的代码集（如果为空）。 Javascript或jQuery有什么方向吗？

如果html代码等于：

<td id="Display1234"></td>

改成：

<td id="Display1234">
    <select name="ShippingSpeedChoice" onchange="RecalcShipping(this);" style="">
      <option value="101" selected="">Free</option>
    </select>
</td>

Answer 1

您首先需要获取页面上的所有元素（因为我假设您不知道哪些元素为空）。

// need to use Array.prototype.slice because getElementsByTagName
// returns an HTMLCollection and not an Array
var allElementsArray = Array.prototype.slice.call(document.body.getElementsByTagName('*'));

var emptyElements = allElementsArray.filter(function(element) {
  return !element.innerHTML; // returns true for all empty elements
});

我不知道要插入什么数据，但是您可以循环遍历emptyElements数组；

emptyElements.forEach(function(element) {
  element.innerHTML = 'some content or HTML';
});

Answer 2

尝试将以下内容用于纯JavaScript解决方案：

 var td = document.getElementById('Display1234'); if (td.innerHTML.trim() == ""){ // Creating the select element var select = document.createElement('select'); select.setAttribute('name', 'ShippingSpeedChoice'); select.setAttribute('onchange', 'RecalcShipping(this);'); select.setAttribute('style', ''); // Creating the option element var option = document.createElement('option'); option.innerText = "Free"; option.setAttribute('value', '101'); option.setAttribute('selected', ''); // Appending elements to td element select.appendChild(option); td.appendChild(select); } 

 <table> <td id="Display1234"></td> </table> 

Answer 3

$('#Display1234').html('your html');

Answer 4

// if the div is empty
if($("#Display1234").html()===""){
    // create a a <select> element
    var $sel = $('<select name="ShippingSpeedChoice" onchange="RecalcShipping(this);" style="">');
    // add an option to the select element
    $sel.append('<option value="101" selected="">Free</option>');
    // add the select element to the div.
    $sel.appendTo("#Display1234");
}

Answer 5

 window.addEventListener("DOMContentLoaded", function(){ var theCell = document.getElementById("Display1234"); if(theCell.textContent.trim() === ""){ theCell.innerHTML = '<select name="ShippingSpeedChoice" onchange="RecalcShipping(this);" style=""> <option value="101" selected="">Free</option></select>' } }); 

 <table> <tr> <td id="Display1234"></td> <td id="other1">something</td> <td id="other2">something else</td> </tr> </table>