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 («глобальным») флагом:

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

Если вы сделать хотят создать Append ребенок, функция создать это createElement и вы добавляете без кавычек:

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

Из комментария вы сделали на вопрос:

Я хочу, чтобы сохранить первоначальный пункт там, а затем добавить еще один с оригиналом, используя замененное слово.

Ладно, тогда вы не хотите обновить para 's innerHTML, вы хотите установить el' 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

удалить кавычки (") из-эш, el является объектом узла DOM (p), так что вам нужно, как передать значение переменной не жалом

изменение

document.body.appendChild('el'); 

в

document.body.appendChild(el); 

Answer 3

Есть несколько ошибок здесь. сначала, как указал @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 4

Ваш 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