Javascript替换和附加孩子

Question

我无法弄清楚如何更改 html 文件中包含的段落中的单词。 我需要更改使用替换功能来替换一个单词，然后在具有新替换单词的段落中附加一个新段落。我已经尝试了很多东西，这就是我现在所拥有的。

function replace(){
var str = document.getElementById('para').innerHTML;
var wat = str.replace("ipsum", "World");
var el = document.createChild('p');
document.getElementById('para').innerHTML = wat;
el.innerHTML = wat;
document.body.appendChild('el');
}

replace();

我什至不需要把它全部放在一个函数中，我最近才补充说，因为我没有做任何其他事情。

Answer 1

这里有各种各样的问题，但最大的是这个：

var el = document.createChild('p');

没有document.createChild 函数，因此会引发错误，从而阻止您的任何其他代码运行。这就是为什么您看不到para 的文本得到更新的原因，您对其innerHTML 的分配位于该行之后。

如果您的目标是更新 para 中的文本，不清楚为什么要创建新元素，您可以这样做：

function replace(){
    var str = document.getElementById('para').innerHTML;
    var wat = str.replace("ipsum", "World");
    document.getElementById('para').innerHTML = wat;
}

replace();

请注意，当您为第一个参数传递replace 字符串时，只会替换第一个 实例，因此例如"lorem ipsum lorem ipsum" 将变为"lorem World lorem ipsum"。如果要替换所有这些，请使用带有 g ("global") 标志的正则表达式：

var wat = str.replace(/ipsum/g, "World");

如果您确实想要创建一个附加子项，则创建它的函数是createElement，并且您在附加时不带引号：

var el = document.createElement('p'); // <= createElement, not createChild
// ...
document.body.appendChild(el);        // <= No quotes

根据您对该问题的评论：

我想保留原来的段落，然后使用替换的词添加另一个与原文的段落。

好的，那么你不想想要更新para的innerHTML，而是设置el的innerHTML：

function replace(){
    var str = document.getElementById('para').innerHTML;
    var el = document.createElement('p');
    el.innerHTML = str.replace("ipsum", "World"); // Or possibly using /ipsum/g
    document.body.appendChild(el);
}

Answer 2

这里有一些错误。首先正如@Girish 指出的那样，您不应该在 el 周围加上引号，因为您需要传递变量而不是字符串。其次，document.createChild('p'); 应该是document.createElement('p');

所以现在完整的工作代码将如下所示：

var str = document.getElementById('para').innerHTML;
var wat = str.replace('ipsum', 'World');
var el = document.createElement('p');
document.getElementById('para').innerHTML = wat;
el.innerHTML = wat;
document.body.appendChild(el);

See the DEMO here

Answer 3

你的 HTML

<p id="para">
  Hello world foo bar foo bar
</p>

<p id="para2">
  Second Paragraph foo bar foo bar
</p>

你的 JavaScript

function replaceAll(elems, match, replacement) {
    [].slice.call(elems).forEach(function(elem) {
        replace(elem, match, replacement);
    });
}

function replace(elem, match, replacement) {
    var re   = new RegExp(match, "g");
    var text = elem.innerHTML.replace(re, replacement);
    var p    = document.createElement("p");
    p.innerHTML = text;
    elem.parentNode.insertBefore(p, elem.nextSibling);
}

var elems = document.getElementsByTagName("p");
replaceAll(elems, "foo", "YAY!");

你的结果

<p id="para">Hello world foo bar foo bar</p>

<p>Hello world YAY! bar YAY! bar</p>

<p id="para2">Second Paragraph foo bar foo bar</p>

<p>Second Paragraph YAY! bar YAY! bar</p>

jsfiddle demo

Answer 4

从 el 中删除 quote(")，el 是 DOM 节点对象 (p)，因此您需要作为传递变量值而不是刺痛

改变

document.body.appendChild('el');

到

document.body.appendChild(el);