如何用javascript替换空的html标签？答案

【问题标题】：How to replace empty html tags with javascript?如何用javascript替换空的html标签？
【发布时间】：2016-11-21 12:29:04
【问题描述】：

我有一些代码，如果它是空白的，我想插入或替换为所需的代码集。 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>

【问题讨论】：

在页面生命周期的哪个阶段需要添加新内容？
How to check if div element is empty的可能重复
@ScottMarcus 页面加载后。我们的电子商务商店有一个故障，间歇性地没有填充该字段。必须选中该框才能进行。

标签： javascript jquery html

【解决方案1】：

尝试使用以下纯 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>

【讨论】：

我是个伪君子，因为我没有在回答中这样做，但if(td.innerHTML.trim() == ""){..} 是个好主意。

【解决方案2】：

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

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

【讨论】：

缺少一个peren
另外，我不得不投反对票，因为当我对此进行测试时，它返回了头部、元、链接、脚本和其他不应包含 HTML 内容的标签中的所有标签。不得不说，这是一个很酷的主意。
@Iwrestledabearonce。固定的。而不是document 使用document.body。这只会抓取<body> 标签内的元素。

【解决方案3】：

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

【讨论】：

这只会改变id为#Display1234的元素的内容。它不检查该元素是否为空。而且它不会检查所有元素。我知道 OP 不清楚，但我非常怀疑这是他们所要求的。

【解决方案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");
}

【讨论】：

【解决方案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>

【讨论】：