-1

I am working with a simple project which requires modification of the html source code with some logic and then display the modified html source code into a div when a button is clicked.

The Output before modification is when i click the Show html enter image description here

When i click the Show converted html the output is like enter image description here

What i basically want to do the modification for inner children whatever may be the depth of child nodes. What is happening here the modification is done at a single level i.e span and h1 tag is eliminated.

Show html button display the content of external html file rather than source code of the page.The code for converting the source code of external html file is like

 <script>
        function convertHtml() {
            
    
          $body = $("#demo").text(); 
          $fakediv = $("<div></div>"); 
          $fakediv.html($body); 
          $fakediv.children().each(function(){ 
              
                $thisText = $(this).text(); 
                if($thisText)
                $(this).text("@"+$thisText+"@") 
        
          });
          $("#demo").text($fakediv.prop("outerHTML")); //fill in the div with converted html string
        
}
            
        //Document is ready to execute the JS    
        $(document).ready(function() {    
            $("#convert").click(function(){
              // alert($("#demo").text());
                convertHtml();
            }); 
        });
        </script>

Please help.

Thanks!

Abhishek Singh
  • 406
  • 1
  • 6
  • 18

2 Answers2

-1

Here you go, on click of a button converted html will be in the text box, JS is commented, let me know if you need help.

$("#convert").click(function(){ /// on click of Convert button
  $body = $("body").prop("outerHTML"); //Get a string of body content
  $fakediv = $("<div></div>"); //Make a fake div to put that string inside it
  $fakediv.html($body); // copy body to our fake div
  $fakediv.children().not("#convert,#output").each(function(){ // for each child of our copied version
    $thisText = $(this).text(); //get whatever text they have inside
    if($thisText)
    $(this).text("@"+$thisText+"@") // and replace it
  });
  $("#output").text($fakediv.prop("outerHTML")); //fill in the text are with converted html string
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
    <head>
    </head>
    <body>
        <h1>Hello</h1> 
        <div id="something">Hello Folks!</div>
        <span>Lovely lady</span>
        <button id="convert">Convert</button>
        <textarea id="output"></textarea>
    </body>

</html>
Ramtin Gh
  • 1,035
  • 2
  • 11
  • 31
-2

Check this fiddle It fill up your need 

$( "#target" ).click(function() {
  $('h1').html("HEllo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" value="ClickMe" id="target" />
<h1>This is need to change</h1>
Safrana Shereen
  • 39
  • 5