Using jQuery's append method in plain javascript, must run Javascript code -
i have situation need import external content dom element, take input , inject different dom element. however, must done without library.
the content can mix of script tags, tags, iframes etc...
in following example i'm saving external content text area element, use append method of jquery , saves container, results in execution of script , addition of anchor element container div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <textarea style="display:none" id ="thirdparty"> <a href="http://www.google.com"> test </a> <script> alert("3rd party content"); </script> </textarea> <div id="container"> </div> <button onclick="inject()"> test </button> <script> function inject() { $('#container').append(document.getelementbyid('thirdparty').value); } </script> </body>is there anyway recieve same result without usage of jquery?
yes, using innerhtml :
document.getelementbyid('container').innerhtml += document.getelementbyid('thirdparty').value hope helps.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <textarea style="display:none" id ="thirdparty"> <a href="http://www.google.com"> test </a> <script> alert("3rd party content"); </script> </textarea> <div id="container"> </div> <button onclick="inject()"> test </button> <script> function inject() { document.getelementbyid('container').innerhtml += document.getelementbyid('thirdparty').value; var elements = document.getelementbyid('container').getelementsbytagname('script') (var = 0; < elements.length; i++){ eval(elements[i].innerhtml); } } </script> </body>
Comments
Post a Comment