How to Replace Dom Element in Place Using JavaScript

How to replace a DOM element with another?

You can use node.replaceChild

The Node.replaceChild() method replaces one child node of the
specified node with another.

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild is the new node to replace oldChild. If it already exists in the DOM, it is first removed.
• oldChild is the existing child to be replaced.
• replacedNode is the replaced node. This is the same node as oldChild.

var a = document.getElementById('A')var h = document.createElement('h1')h.appendChild(document.createTextNode('Title h1'))a.replaceChild(h, a.firstChild)

<div id="A"><p>Paragraph A</p></div>

How to replace one DOM element with two elements - vanilla js

this is one way to do it. there are likely better ways.
this uses id(which is better for unique elements and using DOM manipulation)

this requires that you use the id tag in addition to / instead of class.

a few key points, this assumes there is a parent node of one. (which your code doesn't show). it is a requirement for removing nodes, you can't remove a node itself, you can only remove children - so you must specify from what parent you are removing what child.

const one = document.getElementById('one');
const two = document.getElementById('two');
const three= document.getElementById('three');
const onesParent = one.parentNode;
onesParent.removeChild(one);
onesParent.appendChild(two);
onesParent.appendChild(three);

the alternative you using classes is document.getElementByClassName(); but that gets only the FIRST instance of that class. something that's iffy at best. use id for manipulating single divs.

How to replace Dom element with JS and include an id and a JS function?

You can add an id property by simply setting it:

mySpan.id = "xyz";

And you can attach an event like so:

mySpan.onmouseout = function() {
    doWhatever(this);
}

I would avoid setting event attributes when dynamically creating DOM elements. Assigning the event handlers programmatically is the right way to go.

replace nested html elements with javascript

Try out this

const h2 = document.querySelector("h2"),
      button= document.querySelector("button"),
      newItem = document.createElement('p');

newItem.innerText = "replaced text";

button.onclick = function() {
try {
  h2.parentNode.replaceChild(newItem, h2);
  }
catch {
  console.log("already replaced");
  }
}

<div class="container">
  
  <h1>Header1</h1>
  <div >
    <h2>Header2</h2>
  </div>
  <p>some dummy text</p>
  
  <button>replace header2</button>
</div>

Replace DOM element in Vue after split

You need v-html for displaying and use methods to replace.

var app = new Vue({  el:'#app',   data: {        my_list: [            { "text": "Whoever is Silent. He is Saved", "emphasizes": "Silent, Saved", "link": "website" },            { "text": "If you don't value yourself, who will", "emphasizes": "value, self", "link": "twitter" },        ],    },    methods:{      replaceText: function(str,replaceText){        var replaceArr = replaceText.split(',');        for(let i in replaceArr){          str = str.split(replaceArr[i].trim()).join('<strong>'+replaceArr[i].trim()+'</strong>');        }        return str;      }    }})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script><div id="app"><ul><li v-for="texts in my_list">      <span v-html="replaceText(texts.text,texts.emphasizes)"></span> ({{ texts.emphasizes }}) {{ texts.link }}</li></ul></div>

Replace element isn't working despite following all the steps. Coverting to Array isn't working either

Your code works as posted so long as you access the individual node from the HTMLCollection returned by getElementsByClassName().

// This works to convert the HTMLCollection to an Array
let prevHeading_example = document.getElementsByClassName('my-title');
prevHeading_example = Array.from(prevHeading_example);
console.log('prevHeading array: ', prevHeading_example);

// This whole block works so long as you access the individual node 'prevHeading[0]'
const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));

const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading[0]); // <-- access node at index 0

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

Javascript DOM | Find element by inner Text and replace every element that matches

As I see screenShot of your code, you should parsing span elements for example I write below code:

// if you want just A elements use below line var els = document.getElementsByTagName("span");

   for (i = 0; i < els.length; i++) {   console.log(els[i].textContent +"--" + i );     els[i].className.lastIndexOf('nova')!=-1 && els[i].textContent.lastIndexOf('VRX')!=-1  ?  els[i].style = "text-shadow:0.5px 0.5px 5px gold;color:gold;background: url(https://static.nulled.to/public/assets/sparkling.gif);-webkit-animation: randclanim 2s infinite linear;" : 0;     }

<body><div>  <span class="nova">HI</span>   <br>   <br>  <a > VRX </a></div><div><a> <span class="nova">VRX</span></a></div> </body>

---

Related Topics