Javascript replace and append child

Question

Im having trouble figuring out how to change a word in an included paragraph in a html file. I need to change the use the replace function to replace one word, then append a new paragraph with the paragraph that has the newly replaced word. I've tried multiple things, here's what I have right now.

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

I do not even need it all in a function, I just recently added that because nothing else I was doing was working.

Nothing is happenening. It's not replacing the word(at least that I can see) or appending the new element. — mikeLspohn
– mikeLspohn, Commented Sep 9, 2014 at 4:36
If you just want to change the text, why are you appending new elements? Changing para's innerHTML should be enough, shouldn't it? Could you show us a jsfiddle that demonstrates the issue? — JLRishe
– JLRishe, Commented Sep 9, 2014 at 4:36
appendChild expects a DOM node, not a string. You can read about it in the documentation: developer.mozilla.org/en-US/docs/Web/API/Node.appendChild — Felix Kling
– Felix Kling, Commented Sep 9, 2014 at 4:36
I want to keep the original paragraph there, and then add another one with the original using the replaced word. I'll make a fiddle. — mikeLspohn
– mikeLspohn, Commented Sep 9, 2014 at 4:41

T.J. Crowder · Accepted Answer · 2014-09-09 04:53:45Z

There are various issues here, but the biggest is this:

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

There is no document.createChild function, so that's throwing an error, preventing any of your other code from running. That's why you don't see the text of para get updated, your assignment to its innerHTML is after that line.

It's unclear why you're creating a new element if your goal is to update the text in para, you can just do this:

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

replace();

Note that when you pass replace a string for the first argument, only the first instance will be replaced, so for instance "lorem ipsum lorem ipsum" will become "lorem World lorem ipsum". If you want to replace all of them, use a regular expression with the g ("global") flag:

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

If you do want to create an append a child, the function to create it is createElement, and you append without the quotes:

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

From a comment you made on the question:

I want to keep the original paragraph there, and then add another one with the original using the replaced word.

Okay, so then you don't want to update para's innerHTML, you want to set el's innerHTML instead:

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

Abdul Jabbar · Accepted Answer · 2014-09-09 04:40:47Z

1

There are a few mistakes here. first as @Girish pointed out, you shouldn't be having quotes around el as you need to pass the variable not string. Secondly, document.createChild('p'); should be document.createElement('p');

so the complete working code now will look like this:

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

answered Sep 9, 2014 at 4:40

Abdul Jabbar

2,5736 gold badges28 silver badges45 bronze badges

3 Comments

mikeLspohn Over a year ago

Yet another missed error thank you for pointing out. But yet again still not working. I'm not sure what's going on

Abdul Jabbar Over a year ago

what is not working? see the demo, its working how it should be.. can you elaborate how exactly you want it to work?

mikeLspohn Over a year ago

It's working now.. I have no idea why it wasn't working before there was some issue with my script tags. I erased the whole thing retyped it and working fine now. Not sure why they weren't working I double checked and everything. Thanks for the help though.

maček · Accepted Answer · 2014-09-09 16:19:24Z

Your HTML

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

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

Your 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!");

Your result

<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

Girish · Accepted Answer · 2014-09-09 04:35:53Z

0

remove quote(") from el, el is DOM node object (p) so you need as pass variable value not a sting

change

document.body.appendChild('el');

to

document.body.appendChild(el);

answered Sep 9, 2014 at 4:35

Girish

12.1k3 gold badges37 silver badges54 bronze badges

1 Comment

mikeLspohn Over a year ago

yes, I did notice that mistake after you pointed it out thank you. But it's still not any different.. I've had it written around three different ways now that seemed like they should work, but nothing is seeming to fix my problem.

Collectives™ on Stack Overflow

Javascript replace and append child

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Related