convert text string to dom element with jQuery

Question

How can I convert the text in a link to an html element?

I'm targetting the text with $('a').text(); which returns the value but I can't add the element to it.

I've tried this:

var someText = $('a').text();
var theElement = $('< p >' + someText + '< /p >');
someText.replaceWith(theElement);

I know this supposedly would add a text element inside the link which is not the best practice but not even this works.

what I really need is to remove the whole text and rewrite it immediately after de link as a text element.

any help is appreciated. thank you

markup:

<li>
<a href="/"> <img src="image.png"> text to be converted to element </a>
</li>

what I want:

<li>
<a href="/"> <img src="image.png"></a>
<p> text to be converted to element </p>
</li>

Not clear what you're after, maybe you can clarify it with an example — Claudio Redi, Apr 02 '15 at 18:02
You're trying to replace an `` element with a `
` element, containing the same text? — David Thomas, Apr 02 '15 at 18:02
You are trying to replace a string with an element. Also, the replaceWith method actually receives a string. Third issue is that you cannot put spaces in your html element < p > doesn't work. Here's the fiddle: https://jsfiddle.net/ax24wj1w/ — mags, Apr 02 '15 at 18:04
im targetting all a:first-child elements inside .grid li; i'll add the class later when the p element exists! — Telmo Moura, Apr 02 '15 at 18:06

Blazemonger · Answer 1 · 2015-04-02T18:26:34.067

2

Since someText is a string, not a jQuery element, you can't call .replaceWith() on it. Try something like this:

var someLink = $('a');
var someText = someLink.text();
var theElement = $('<p>' + someText + '</p>'); // no spaces inside tags
someLink.replaceWith(theElement);

http://jsfiddle.net/0xxrL6zy/

UPDATE Since you added new information to your question, here's a solution to meet your needs:

var someLink = $('a');
var someText = someLink.text();
var someImg = someLink.find('img');
var theElement = $('<p>' + someText + '</p>');
someLink.html(someImg).after(theElement);

http://jsfiddle.net/mblase75/mzbtr0qp/1/

edited Apr 02 '15 at 18:26

answered Apr 02 '15 at 18:02

Blazemonger

90,923
26
142
180

im not trying to convert a link into text! – Telmo Moura Apr 02 '15 at 18:16
4

Then you should have been more clear when you originally posted your question. It's not cool to completely change the parameters of a question after people have already answered it. Regardless, I've updated my answer to reflect your new code. – Blazemonger Apr 02 '15 at 18:26

score 2 · Answer 2 · edited May 23 '17 at 12:22

2

http://jsfiddle.net/cvgbqb8b/2/

var anchor = $('li a');
anchor.after('<p>' + anchor.text() + '</p>')
    .contents()
    .filter(function(){
        return (this.nodeType == 3);
    })
    .remove();

Found the code for removing the text afterward here https://stackoverflow.com/a/17852238/1415091

edited May 23 '17 at 12:22

Community

1
1

answered Apr 02 '15 at 18:03

Scott Smith

417
3
11

score 1 · Accepted Answer · answered Apr 02 '15 at 18:25

I'd suggest:

// iterate over each of the <a> elements within <li> elements:
$('li a').each(function() {
  // create a <p> element, setting its text
  // to that of the 'this' element (the <a>):
  $('<p>', {
    'text': this.textContent
  // insert that created <p> after the current <a> element:
  }).insertAfter(this);

  // filtering the childNodes of the current <a>:
  $(this).contents().filter(function() {
    // keeping only those that are of nodeType === 3
    // and therefore are textNodes:
    return this.nodeType === 3;
  // removing those nodes:
  }).remove();
});

$('li a').each(function() {
  $('<p>', {
    'text': this.textContent
  }).insertAfter(this);
  $(this).contents().filter(function() {
    return this.nodeType === 3;
  }).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="/">
      <img src="http://lorempixel.com/300/300/people" />text to be converted to element</a>
  </li>
</ul>

References:

JavaScript:
- Node.nodeType.
- Node.textContent.
jQuery:
- contents().
- each().
- filter().
- wrap().

It doesn't need to be voted up (unless others wish to do so); if it solved your problem - and was of more help than other answers - you're free to accept this (or any other) answer to reflect that. — David Thomas, Apr 02 '15 at 18:44
I'm glad to have been of help, but if you feel this - or any other - answer has answered your question, your acceptance (checking the tick character (`✓`) beside the appropriate answer) would be appreciated. — David Thomas, Apr 02 '15 at 19:05

score 0 · Answer 4 · answered Apr 02 '15 at 18:05

0

Use .html()

var someText = 'Hey!';
$('#test').html('<p>' + someText + '</p>');

Fiddle: http://jsfiddle.net/howderek/3t3Lw75x/

answered Apr 02 '15 at 18:05

howderek

2,224
14
23

convert text string to dom element with jQuery

4 Answers4