Replace p tag with div javascript

Question

Below is a code snippet

Nội dung chính Show

Can we use DIV instead of P?
How do I change my p tag?
What is the difference between div and p tag?
Can P tags be used inside div tags?

var pTags=document.getElementsByTagName('p');
for(i=0;i

It should replace all P tags with Div but it's not replacing all but some of them. The red ones (fiddle) are not replacing.

I don't need this but I want to know what is I'm doing wrong here ? So, my question is why not it's working in this way. Hope someone can tell me the fact.

Thanks for your effort!

asked Nov 15, 2012 at 2:15

The AlphaThe Alpha

140k27 gold badges283 silver badges303 bronze badges

2

getElementsByTagName returns a live node list so every time you replace a node the list changes, so you only want to get the first node in the list and replace it until the list is empty, see http://jsfiddle.net/mowglisanu/eZNqn/4/


 answered Nov 15, 2012 at 2:24
 
1
The one line way ;-)
First, select any elem you want (in this case, all content of body)
var elem = document.getElementsByTagName('body')[0];
var target = elem.innerHTML;
The "line"
elem.innerHTML = target.replace(/(/igm, '');
I hope that helps. See in action here
 answered
Jun 6, 2013 at 15:46
 
MCurbeloMCurbelo
4,0272 gold badges24 silver badges21 bronze badges
 
How can I change a tag with pure JavaScript like that?
some text
change span tag to div tag etc.



some text
Use innerHTML and replace the method with a regular expression to change the tag name JS.



 
     Text in span
 
    

 
Output:
Do comment if you have another example or way to do it. You can also do comment if have any suggestions or doubts on this
topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.
 The JavaScript replaceWith() method is a method of the Element object that allows you to replace the Element with the argument passed into the method.
This method accepts either a set of Node element(s) or a Text string.
When you pass a Node into the method, you will replace the Element where you call this method with that Node.
In the following example, the 
 element is replaced with a 
element:
const div = document.createElement("div");
const p = document.createElement("p");
const header = document.createElement("h2");

div.appendChild(p);
p.appendChild(header);

console.log(div);

/*  
      
        

      
 
*/
const span = document.createElement("span");
p.replaceWith(span);
console.log(div);
/* 
 
 
*/
On the other hand, JavaScript will add a string you pass into the method as a Text node.



In the example below, the 
 element is replaced with Hello World! text:
const div = document.createElement("div");
const p = document.createElement("p");

div.appendChild(p);

console.log(div);

/*  
      
    
*/
p.replaceWith("Hello World!");
console.log(div);
/* 
 Hello World!
 
*/
Even when you pass a string of HTML tags, the replaceWith() method will consider it as a Text node instead of a valid HTML tag node.
Consider the following example:
const div = document.createElement("div");
const p = document.createElement("p");

div.appendChild(p);

console.log(div);

/*  
      
    
*/
p.replaceWith("
");
console.log(div);
/* 
 <h2></h2>
 
*/
As you can see from the result of the second console log above, the <> symbol used to create HTML tags are transformed into < and > entities.
They are visible on the HTML page from the browser and are not considered valid HTML tags.
To actually pass a Node object, you need to use the JavaScript document.createElement() method to create one.
Or if you already have the HTML tags present on the page, you can fetch them and put
them in the desired location.
For example, suppose you have an HTML page structured as follows:
<div id="wrapper">
  <p id="paragraph">
    <span id="span">span>
  p>
  <ul id="list">
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScriptli>
  ul>
div>
You can replace the 
 tag with the 
 tag by fetching the elements using their id attribute first:
const p = document.getElementById("paragraph");
const list = document.getElementById("list");

p.replaceWith(list);
The new HTML structure will be as shown below:
<div id="wrapper">
  <ul id="list">
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScriptli>
  ul>
div>
The replaceWith() method can replace the Element with a Text node or a set of Node element objects.
You can create the Node using document.createElement() or fetch one from the existing DOM node tree.
And that’s how the JavaScript replaceWith() method works.
Keep in mind that the native document object replaceWith() method is a bit different from the jQuery replaceWith() method.
The jQuery replaceWith() method returns the original Element where you call the method from. Aside from that, both method works the same way.
Good work on
learning about JavaScript replaceWith() method. 👍
 
Can we use DIV instead of P?
DIV is a generic block level container that can contain any other block or inline elements, including other DIV elements, whereas P is to wrap paragraphs (text). Show activity on this post. A "DIV" tag can wrap "P" tag whereas, a "P" tag can not wrap "DIV" tag-so far I know this difference.
How do I change my p tag?
The easiest way to modify the content of an HTML element is by using the innerHTML property..
 The HTML document above contains a  element with id="p1".
 We use the HTML DOM to get the element with id="p1".
 A JavaScript changes the content ( innerHTML ) of that element to "New text!".
 
What is the difference between div and p tag?
The p element is paragraph level content, usually text. The div describes a section of a portion of the page or content. Divs usually contain different kinds of content that is all related to a single thing, like an image and an article about it.
Can P tags be used inside div tags?
Positioning Blocks Defined by  Tag
The  tag can NOT be inside  tag, because the paragraph will be broken at the point, where the 
 tag is entered. To apply styles inside a paragraph use  tag, which is used with inline elements.

programming javascript

Replace p tag with div javascript

Can we use DIV instead of P?

How do I change my p tag?

What is the difference between div and p tag?

Can P tags be used inside div tags?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội