Javascript 将 HTML 附加到包含 HTML 的变量中答案

【问题标题】：Javascript append HTML to a variable that holds HTMLJavascript 将 HTML 附加到包含 HTML 的变量中
【发布时间】：2017-11-13 08:03:15
【问题描述】：

我有一个 Javascript 变量，比如说命名为 HTMLvar，如果我有 HTML 代码含义

console.log(HTMLvar)

我得到这个结果，所以变量包含纯 HTML 代码：

<div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
</div>

我想要的是附加一些数据（HTML）

var HTMLnewdata = 此处是我的新附加数据

在 id=msgscntr 的 div 开头。因此，当我再次控制台记录该 HTMLvar 时，附加该数据后的结果将是这样的。

<div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        " MY NEW APPENDED DATA HERE " 
        lot of html divs here too
    </div>
    lot of divs here too
</div>

我希望你们理解我在这里想要实现的目标，当然是使用 Javascript。提前谢谢

【问题讨论】：

请问您想将数据附加到 div 或将新的 html 数据添加到变量中吗？？！
@moathnaji 我有两个包含 HTML 的变量，我想在第一个存在的 div 中添加一个。因此，当我执行 console.log(first div) 时，我想在第一个 div 中查看第二个 div 的内容。我希望你明白我的意思
是的，谢谢，您将使用 astIndexOf() 将变量作为字符串操作，然后使用 concat() 函数附加新字符串，您可以使用此链接查找字符串函数并使用它们. techrepublic.com/article/manipulating-strings-with-javascript

标签： javascript html

【解决方案1】：

我假设 HTMLvar 是一个字符串。

// Parse the string as HTML
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(HTMLvar, 'text/html');

// Get your element
var msgCntr = htmlDoc.getElementById('msgscntr');

// Do your logic here, append whatever you need

// When you done this will return as string again
var HTMLnewdata = htmlDoc.body.innerHTML;

【讨论】：

【解决方案2】：

这是一个工作示例，如果有任何不清楚的地方，请随时提问：

var starterHtml = `
  <div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
  </div>
`;
var index = starterHtml.indexOf('>')
var final = starterHtml.slice(0, index + 1) + "!!!CONTENT GOES HERE!!! <br>" + starterHtml.slice(index + 1);
var wrapper = document.getElementById('final'); 
wrapper.insertAdjacentHTML('afterend', final)

&lt;div id="final"&gt;&lt;/div&gt;

【讨论】：

整个问题是我在 DOM 中没有那个 HTML，它只存在于一个变量中。我会解释更多。我在单页应用程序中工作，例如我有两个页面 A 和 B 。所以当我在页面 B 中时，A 的内容只存在于一个变量中，它不会在 DOM 中退出。如果我在页面 A 中，我可以轻松附加新数据。但是如果我在另一个页面中，我不再有 DOM 中页面 A 的内容，所以我想将从 AJAX 获得的数据附加到页面 A 的内容中，该内容仅存在于不在 DOM 上的变量中如果这有意义
@ler，简单，我已经更新了我的答案。现在我从字符串化的 HTML 开始，我认为它非常接近您的情况。

【解决方案3】：

您可以在内存中创建一个 DOM 元素并使用它：

var starterHtml = `
  <div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
  </div>
`;

//Create a DOM element
var holder = document.createElement("div");
//Load it with your HTML
holder.innerHTML = starterHtml;
//Find your target element and insert your string
holder.querySelector("#msgscntr").innerHTML = "!!My New Awesome content<br>" + holder.querySelector("#msgscntr").innerHTML;
//Get the inner HTML back
var finalHtml = holder.innerHTML;
//and you're done
console.log(finalHtml);

【讨论】：