JavaScript将HTML添加到保存HTML的变量中

Question

我有一个名为HTMLvar的Javascript变量，它包含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> 

我想要的是在带有id=msgscntr的div开头添加一些数据（HTML）。

var HTMLnewdata = 这里是我新添加的数据

所以在追加这些数据后，当我再次用console.log输出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实现的目标。提前感谢你们。

- ler

---

请问您是想将数据追加到 div 中，还是将新的 HTML 数据添加到变量中？请明确说明。 - moath naji

@moathnaji 我有两个包含HTML的变量，我想将其中一个添加到第一个变量中存在的div中。因此，当我执行console.log(first div)时，我希望在第一个div中看到第二个div的内容。我希望你能理解我的意思。 - ler

是的，谢谢。您将使用astIndexOf()函数对变量进行字符串操作，然后使用concat()函数附加新字符串。您可以使用此链接查找字符串函数并使用它们。https://www.techrepublic.com/article/manipulating-strings-with-javascript/ - moath naji

Answer 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;

- AndreFeijo

Answer 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)

<div id="final"></div>

- P.S.

---

整个问题在于我没有将HTML存在DOM中，它只存在于一个变量中。我会解释得更详细一些。我正在开发一个单页应用程序，例如我有两个页面A和B。所以当我在页面B时，页面A的内容仅存在于一个变量中，而不是DOM中。如果我在页面A中，我可以轻松地添加新数据。但是如果我在另一页中，我就不再拥有页面A的内容了，因此我想将从AJAX获取的数据附加到仅存在于变量而不是DOM中的页面A的内容中，如果这有意义的话。 - ler

@ler，很容易，我已经更新了我的答案。现在我开始使用字符串化的HTML，我认为它非常接近你的情况。 - P.S.

Answer 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);

- Jon P