Question

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

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（＆＃34; global＆＃34;）标志的正则表达式：

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＆＃ 39; s 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删除引号（“），el是DOM节点对象（p）所以你需要作为传递变量值而不是sting

更改

document.body.appendChild('el');

到

document.body.appendChild(el);

Javascript替换并追加孩子

4 个答案: