wrap a html structure around a text

Question

Given some text and a html structure, how can I create a new html fragment where the structure is wrapped around the text?

Example:

text = "mytext"
html = "<div><p><span></span></p></div>"

Desired result:

newHtml = "<div><p><span>mytext</span></p></div>"

If possible, using pure jquery, without parsing html manually. Note that "text" is a literal string, not a text node in a document.

Of course, the code I'm looking for should work with arbitrary html, not just with the example above.

Simpler? There's no `.insertTextIntoDeepestDescendant()` method... — Blender, Aug 09 '13 at 11:56
I think @Blender's approach is about as simple as it comes. You could combine the `*` and `last`, but it's essentially the same: http://jsfiddle.net/MnJkE/4/ — billyonecan, Aug 09 '13 at 12:06
are you always going to insert the text between span elements? — Jatin patil, Aug 09 '13 at 12:10
@billyonecan: ok, for a lack of a better option, could you make this an answer so that I can accept it? — georg, Aug 10 '13 at 10:14

score 2 · Answer 1 · answered Aug 09 '13 at 11:41

2

Something along the lines of :

var text = "mytext";
var html = "<div><p><span></span></p></div>";
var div = $(html);
div.find('span').html(text);
div.appendTo(someOtherElement);

answered Aug 09 '13 at 11:41

OneOfOne

95,033
20
184
185

Thanks, but this only works with my specific example. I'm looking for a more general approach. – georg Aug 09 '13 at 11:53
I think you're looking into templates, check http://stackoverflow.com/questions/14062368/new-recommended-jquery-templates – OneOfOne Aug 09 '13 at 12:04

score 0 · Answer 2 · answered Aug 09 '13 at 11:43

0

try following

var text = "mytext",
    mainDiv = $("<div/>"),
    para = $("<p/>"),
    span = $("<span/>", {"html":text});

mainDiv.append(para.append(span));

//or you can write all above in one liner

i hope it helps.

answered Aug 09 '13 at 11:43

maverickosama92

2,685
2
21
35

score 0 · Answer 3 · answered Aug 09 '13 at 11:44

0

Have you tried using .wrap() in jQuery? Try

    $('span').wrap(text);

answered Aug 09 '13 at 11:44

melvindidit

430
2
6
15

score 0 · Answer 4 · answered Aug 09 '13 at 11:48

0

You can achieve it with the help of place holder as follows,

text = "mytext"
oldHtml = "<div><p><span>[0]</span></p></div>"
newHtml = oldHtml.replace("[0]",text);

answered Aug 09 '13 at 11:48

Jatin patil

4,252
1
18
27

Thanks! I thought about something like this, but it doesn't work for my needs (html comes from outside, I can't insert any placeholders there). – georg Aug 09 '13 at 11:57
Ok ill get back to u on this. are you always going to insert the text between span elements? – Jatin patil Aug 09 '13 at 11:59
No, not always. There can be any html. – georg Aug 09 '13 at 12:29
So how will you come to know where u want to insert the text? – Jatin patil Aug 09 '13 at 12:36
The text will be inserted in the bottommost node, just like in `$.wrap` – georg Aug 10 '13 at 10:15

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Credit to @Blender for this (posting as an answer as requested):

text = "mytext"
html = "<div><p><span></span></p></div>"

newHtml = $(html);
newHtml.find('*:last').text(text);

console.log(newHtml.get(0)); // <div><p><span>mytext</span></p></div>

So construct a jQuery object from the html string, then find the :last descendent (in this example, the span), and set the text.

wrap a html structure around a text

5 Answers5

Here's a fiddle