Question

我有以下代码：

widgetEl.innerHTML = "<h2>" + name + "</h2><h3>Time Series</h3>" ;

工作正常。我需要传递div而不是<h3>Time Series</h3>。如何通过以下div而不是<h3>Time Series</h3>。

<div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>

请帮助....

Answer 1

我猜你有引用问题。在JS周围使用单引号：

widgetEl.innerHTML = '<h2>' + name + '</h2><div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>';

或者div是否是真正的HTML元素：

widgetEl.innerHTML = '<h2>' + name + '</h2>' + document.getElementById('test').outerHTML.replace(/id\="test"/, 'id="test2"');

请注意，在后一种情况下，您必须更改div的ID以避免双倍id。

Answer 2

因为不清楚你想要做什么，这里有几次尝试使用不同技术针对不同情况你正在做什么

要连接dom字符串，需要在字符串

中使用double时使用单引号

widgetEl.innerHTML = "<h2>" + name + "</h2>"+'<div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>';

使用replaceChild

将h3替换为现有的div元素

var test = document.getElementById("test");
var h3 = widgetEl.getElementsByTagName("h3")[0];
widgetEl.replaceChild(test,h3);

另一种方法是，使用remove()删除旧元素，然后使用appendChild附加div 当然使用这种方式可能不会导致你想要的东西，因为h3周围可能还有其他的东西，只是假设你的例子中的字符串是当前在div中的字符串。

var test = document.getElementById("test");
widgetEl.getElementsByTagName("h3")[0].remove();
widgetEl.appendChild(test);

如果需要克隆

var test = document.getElementById("test");
widgetEl.getElementsByTagName("h3")[0].remove();
widgetEl.appendChild(test.cloneNode());

另请记住更改ID，因为所有ID都必须是唯一的

var clone = document.getElementById("test").cloneNode();
clone.id = "someOtherUniqueID";
var h3 = widgetEl.getElementsByTagName("h3")[0];
widgetEl.replaceChild(clone,h3);

另请注意，使用getElementsByTagName将尝试获取标记名为h3的任何元素，我在此假设它是该元素中唯一的元素，您必须添加其他度量以确保您是如果有其他h3元素，那就得到正确的。

Answer 3

document.getElementById("content-11").innerHTML = '<div v-bind:style="stylesFontSize">' 
  + '<p v-bind:style="stylesMessage" class="c-ecard__message" style="overflow: hidden; position: absolute; width: 69.7%; max-width: 57.7%; height: 68.3%; left: 42.1%; top: 0.8%; line-height: 1;" v-html="this.$options.filters.newline(preparedMessage)"></p></div>';

如何在Javascript </div>中传递innerHTML中的<div>

3 个答案: