HTML DOM manipulation : properly replace tag by heading tag

Question

I want to replace some tag-inside-a-paragraph-tag by a heading-tag-enclosed-by-a-paragraph tag. This would result in proper W3C coding, but it seems that jQuery is not able to manipulate the DOM in the right way!? I tried several ways of (jQuery) coding, but i can't get it to work ..

Original code:

<p>some text <span>replace me</span> some more text</p>

Desired code:

<p>some text</p><h2>my heading</h2><p>some more text</p>

Resulting code by jQuery replaceWith():

<p>some text<p></p><h2>my heading</h2><p></p>some more text</p>

Demo: http://jsfiddle.net/foleox/J43rN/4/ In this demo, look at "make H2 custom" : i expect this to work (it's a logical replace statement), but it results in adding two empty p-tags .. The other 2 functions ("make code" and "make H2 pure") are for reference.

Officially the W3C definition states that any heading tag should not be inside a paragraph tag - you can check this by doing a W3C validation. So, why does jQuery add empty paragraph tags? Does anybody know a way to achieve this? Am i mistaken somehow?

Because you're telling it to. You're using the replaceWith function on a child, so how is it supposed to tell you want to close the parent tag? — gpgekko, Jan 23 '14 at 11:38
The browser closes the paragraph as you can't have a H2 inside a paragraph. — adeneo, Jan 23 '14 at 11:39
computer are stupid... they do what we tell them to do. and you are saying to put that h2-h.. there — Jorge Y. C. Rodriguez, Jan 23 '14 at 11:40
I just updated the example JSFiddle code a little bit .. I tell jQuery to replace `replace me` by `
my heading
` so the surrounding p-tags should be closed / opened, right? — Roelof Berkepeis, Jan 23 '14 at 11:47
Look for my solution below for a case-insensitive solution that will also handle multiple occurrences. — Vikram Deshmukh, Jan 23 '14 at 12:31

gpgekko · Answer 1 · 2014-01-23T11:48:24.737

If you read the jQuery docs, you will find:

When the parameter has a single tag (with optional closing tag or quick-closing) — $("<img />") or $("<img>"), $("<a></a>") or $("<a>") — jQuery creates the element using the native JavaScript createElement() function.

So that is exactly what it is doing. And as I said in my comment, you can't change a parent node from a child node, you're altering the DOM here, not HTML code. So you'll need to either use replaceWith on the parent node and replace everything or use something like remove and append to split it up in multiple elements which you append after each other.

OK, you're right .. i used something like this in my definite code : see my accepted solution of @dfsq. — Roelof Berkepeis, Jan 23 '14 at 20:53

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

Try this:

var temp = "<p>some text <span>replace me</span> some more text</p>";
temp.replace(/(\<span\>replace me\<\/span\>)/gi, '</p><h2>my heading</h2><p>');

This will do a case insensitive replace for multiple occurences as well.

Read more about capturing groups here

Original credit to this question!

edited May 23 '17 at 10:25

Community

1
1

answered Jan 23 '14 at 12:17

Vikram Deshmukh

12,304
4
36
38

OK, this is the way the replace function works .. it can be useful, but i'm looking for a way to handle DOM elements, not only strings. – Roelof Berkepeis Jan 23 '14 at 20:51

score 1 · Accepted Answer · answered Jan 23 '14 at 12:55

1

You can achieve this with this code. However it's pretty ugly:

$('.replaceMe').each(function() {

    var $parent = $(this).parent(),
        $h2 = $(this).before('$sep$').wrap('<h2>').parent().insertAfter($parent);

    var split = $parent.html().split('$sep$');

    $parent.before('<p>' + split[0] + '</p>');
    $h2.after('<p>' + split[1] + '</p>');

    $parent.remove();
});

http://jsfiddle.net/J43rN/5/

answered Jan 23 '14 at 12:55

dfsq

191,768
25
236
258

Your solution works, among other coding answers which don't .. It's a bit ugly indeed, but i guess there are many ways to (quickly) achieve a goal .. I used your code to come up with my definite solution, using your split/after/before idea and not rewriting the parent content, because this (always) generates the unwanted empty p-tags. See http://jsfiddle.net/foleox/J43rN : it holds a general replace function which can also do other replacements alike. – Roelof Berkepeis Jan 23 '14 at 21:16

Systematix Infotech · Answer 4 · 2014-01-23T13:51:33.827

0

Please try this I have updated the http://jsfiddle.net/J43rN/6/ example by the below java script function please check I hope it will work for you

function fnMakeCode() {
    $('#myP #replaceMe').html("<code id='replaceMe'>My Code</code>");
}
function fnMakeH2pure() {
    $('#myP #replaceMe').html("<h2 id='replaceMe'>My H2 pure</h2>");
}
function fnMakeH2custom() {
     $('#replaceMe').html("<p></p>").html("<h2>My H2 custom</h2>");
}

edited Jan 23 '14 at 13:51

answered Jan 23 '14 at 11:52

Systematix Infotech

2,345
1
14
31

i see you changed the fnMakeH2custom() at bit, but this does not work .. i tried this at first .. the result is that some empty p-tags are added, as i stated. – Roelof Berkepeis Jan 23 '14 at 12:09
Can you please paste your java-script function and html so I can check if possible? – Systematix Infotech Jan 23 '14 at 12:29
please use the edited code I have tested it should work here is the fiddle link http://jsfiddle.net/J43rN/6/ – Systematix Infotech Jan 23 '14 at 13:51
:@SystematixInfotech : no, the result of this JSfiddle seems OK at first glance, but it's not what i want to achieve. Read my question and look into the DOM of your result. – Roelof Berkepeis Jan 23 '14 at 20:57

HTML DOM manipulation : properly replace tag by heading tag

my heading

4 Answers4