How to replace a <p> tag in an html file using Javascript

Question

In an Html file that I have, there is a paragraph tag that basically looks like this:

<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>

The contents of this paragraph are grabbed from a textarea that a user fills out and the value of this textarea is grabbed via jquery and filled into this element. The output looks like this: Hey What's Up

This paragraph tag ignores the newlines within the paragraph, so the paragraph displays all on one line. Due to the format and layout of the project, I can't necessarily change the html source. I was wondering if there was a way to change this exact element to be:

<pre class="col-sm-8 form-control-static wordwrap">
 Hey
 What's
 Up
</pre>

using only javascript. Is this possible? This is so my output will keep the newlines.

Wouldn't it be easier to just style it using CSS white-space: pre;? — Joseph Marikle
– Joseph Marikle, Commented May 1, 2017 at 18:47
document.querySelector('p').innerHTML = "Hey<br>What's<br>Up"; — Egor Stambakio
– Egor Stambakio, Commented May 1, 2017 at 18:48
I don't think replacing a paragraph tag with a pre tag is really want you want. Would it be preferrable to still use a paragraph tag but still have it respect your newlines? because that's doable with css (as noted above) — user400654
– user400654, Commented May 1, 2017 at 18:56

happymacarts · Accepted Answer · 2017-05-01 19:48:50Z

0

I think you are looking for something like this. you tagged jquery so I used that but this could be done in vanilla js too.

I linked to a onkeyup event if you wanted to change to use the button only if you wanted

$(document).ready(function(){

  function updateContent() {
     $('#p1').html($('#source').val());
  }

  $('#update').on('click', function(e){
   updateContent();
   // add other stuff here
   // for only the click event
  })
  
  $('#source').on('keyup', updateContent);


})

button {
  display:block;
}

#source {
  height:100px;
}
#p1{
  white-space:pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content

add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>

<p id="p1">THIS WILL CHANGE!</p>

edited May 1, 2017 at 19:48

answered May 1, 2017 at 19:40

happymacarts

2,5941 gold badge29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sank6 · Accepted Answer · 2017-05-01 19:01:44Z

-2

It is very simple and has been asked before... BUT here it is, using DOM:

document.getElementById("p1").innerHTML = "<p>This</p><p>Has</p><p>Changed!</p>";

<p id="p1">THIS WILL CHANGE!</p>

So your piece of code you need is:

document.getElementById("p1").innerHTML = "New text!";

EDIT

This is simpler, easier and more browser friendly than using <pre> tags. Therefore, I would highly recommend you to use this instead.

edited May 1, 2017 at 19:01

answered May 1, 2017 at 18:46

Sank6

49710 silver badges28 bronze badges

5 Comments

Sank6 Over a year ago

There we go that's better!

user400654 Over a year ago

"and has been asked before" then question should be dupe closed. Do you have a duplicate?

Sank6 Over a year ago

Here and here. This doesn't end!

Sank6 Over a year ago

WHY THE DOWNVOTING. ARE YOU GUYS MAD?? Who downvotes the right and only answer?

user400654 Over a year ago

i mean... the question specifically asks how to replace a paragraph tag with a preformatted text tag. your answer changes the innerhtml of a paragraph tag and doesn't note why that's better than doing what they wanted to do.

Collectives™ on Stack Overflow

How to replace a <p> tag in an html file using Javascript

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related