Replace String inside nested html tag in javascript-CodePudding

I wanted to replace the text content including its tags. Below is the sample code:

<h1>JavaScript Strings</h1>
<h2>The replace() Method</h2>

<p>replace() searches a string for a value,
and returns a new string with the specified value(s) replaced:</p>

<p id="demo"><ul><li>Visit Microsoft!</li></ul> <ul><li>The following required data are either missing, have errors, or are not being properly saved. Ensure the data are correct and then press 'Save' on the indicated tab.<ul><li><a id='dataMissingHide95'>Items missing from the Sources of Funds tab (EXPAND)</a><a id='dataMissingShow95' style='display:none;'>Items missing from the Sources of funds tab (COLLAPSE)</a><ul id='itemsMissingShow95' style='display:none;'><li><a id='dataMissingHide92'>Transaction information (EXPAND)</a><a id='dataMissingShow92' style='display:none;'>Transaction information (COLLAPSE)</a><ul id='itemsMissingShow92' style='display:none;'><li>Investment experience (For any investment type checked, number of years must be selected.)</li></ul></li></ul></li><li><a id='dataMissingHide91'>Items missing from the Transaction Disclosures tab (EXPAND)</a><a id='dataMissingShow91' style='display:none;'>Items missing from the Transaction Disclosures tab (COLLAPSE)</a><ul id='itemsMissingShow91' style='display:none;'><li> Please answer the questions below on the Transaction Disclosures page and save the Transaction Disclosures page.<ul><li>Explain in detail why this transaction is in the best interest of your client</li></ul></li></ul></li></ul></li></ul></p>

<script>
let text = document.getElementById("demo").innerHTML; 
document.getElementById("demo").innerHTML = text.replace("<ul><li>Visit Microsoft!</li></ul>", "W3Schools");
</script>

I am new to JS.....so even not clear what to search for the solution. This replacement work if the text is outside the tag. But if list tags are introduced, then replacement does not work.

CodePudding user response：

your main problem is you can't place a ul in a p tag, use div instead. also just set the html to what you want. see below

document.getElementById("demo").innerHTML = "<ul><li>Visit Microsoft!</li></ul>", "W3Schools";

<h1>JavaScript Strings</h1>
<h2>The replace() Method</h2>

<p>replace() searches a string for a value,
and returns a new string with the specified value(s) replaced:</p>

<div id="demo">
<ul>
  <li>Visit Microsoft!</li>
</ul>
<ul>
  <li>The following required data are either missing, have errors, or are not being properly saved. Ensure the data are correct and then press 'Save' on the indicated tab.
      <ul>
         <li><a id='dataMissingHide95'>Items missing from the Sources of Funds tab (EXPAND)</a>
             <a id='dataMissingShow95' style='display:none;'>Items missing from the Sources of funds tab (COLLAPSE)</a>
             <ul id='itemsMissingShow95' style='display:none;'>
                <li><a id='dataMissingHide92'>Transaction information (EXPAND)</a>
                    <a id='dataMissingShow92' style='display:none;'>Transaction information (COLLAPSE)</a>
                    <ul id='itemsMissingShow92' style='display:none;'>
                      <li>Investment experience (For any investment type checked, number of years must be selected.)</li>
                   </ul>
                </li>
            </ul>
        </li>
        <li><a id='dataMissingHide91'>Items missing from the Transaction Disclosures tab (EXPAND)</a>
            <a id='dataMissingShow91' style='display:none;'>Items missing from the Transaction Disclosures tab (COLLAPSE)</a>
            <ul id='itemsMissingShow91' style='display:none;'>
               <li> Please answer the questions below on the Transaction Disclosures page and save the Transaction Disclosures page.
                  <ul>
                     <li>Explain in detail why this transaction is in the best interest of your client</li>
                  </ul>
               </li>
           </ul>
        </li>
     </ul>
   </li>
</ul>  
</div>

CodePudding user response：

You can navigate through your tree if "demo" is a div like:

<script>
    document.getElementById("demo").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].innerHTML = "W3Schools";
</script>