replace code in HTML with JS

Question

I would like to replace an entire block of HTML in my page using JavaScript:

<html>
  <input type="number" id="totale">
  <br>
  <button onclick="primo();">esegui</button>
    <ul>
      <li id="figlio"></li>
      <li id="figlia"></li>
      <li id="genitori"></li>
    </ul>
<html>

I would like to replace the entire block of the <ul> element with a paragraph element (<p>). How can I do this?

I think the idea of StackOverflow is that you first look for answers and try something yourself. Don't just ask other people to write your code for you. You could start by `let el = document.getElementsByTagname("ul")` — Kokodoko, Jan 06 '18 at 12:43
What does the `input`, `button` and `primo` call have to do with your question? — trincot, Jan 06 '18 at 12:44
Is this in response to a user-action, or automatically on page-load? If in response to a user-action then please supply a little information regarding that action in order that we can provide a full solution of use to yourself and, hopefully, future visitors. If it's on page-load then you should really change the HTML on the back-end (whether it's output from a CMS or a static HTML file) to avoid every client's browser having to perform the same action that could be undertaken once by you as the page author. — David Thomas, Jan 06 '18 at 12:53

score 0 · Answer 1 · answered Jan 06 '18 at 12:48

You can use this javascript to achieve this:

// get the ul element you want to replace with 
var ulTag = document.getElementsByTagName('ul')[0];
//create a p element
var paraObj=document.createElement("p");
//set the p text 
paraObj.innerHTML='This is a new paragraph';
//get the parent element of the <ul>
var ObjParent=ulTag.parentNode; 
//replace the <ul> with <p>
ObjParent.replaceChild(paraObj,ulTag);

<html>
    <input type="number" id="totale"><br>
          <button  onclick="primo();">esegui</button>
          <ul>
               <li id="figlio"></li>
               <li id="figlia"></li>
               <li id="genitori"></li>
          </ul>
<html>

replace code in HTML with JS

1 Answers1