How to get content of div without JavaScript script blocks [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following HTML
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
How to get content of #example but also without the JavaScript tags or JavaScript code?

And to answer the general question, if you need to get the contents of a node with some of the children not included, you probably need to remove the tags you don't want in there, in your case the script tags.
If you need to keep the original intact, take a look at cloneNode (https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) on how to get a clone of the node that you can work on without touching the original.

If you just want to grab the text that's inside the id="example", you could just use:
var getExample = document.getElementById('example').innerHTML;
or with jQuery:
var $getExample = $('#example').html();
I'm assuming you just didn't want the JavaScript inside the id="example" div, being as you tagged this JavaScript. In that case you could create a JavaScript file and add it with
<script src="javascriptFileName.js"></script>
this would be placed at the bottom of the body.

With jquery you can try this way. See here http://jsfiddle.net/AnjJa/129/
var el = $('#example').clone();
el.find('script').remove();
alert(el.html());
But why you put the JS there?

Related

javascript - clone DOM body without script tags [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am developing a chrome extension in which I need to clone the body tag-childrens. (a clone - so that the elements does not get updated when the DOM changes). And Re-append them to the body tag, without the script tags.
I am doing this to avoid the script tags for executing.
The problem is that I don't want script tags cloned along with the other elements in the body. I read that using regex to filter/search for stuff in the html is general not a good idea.
How can I accomplish my goals, what are my options?
A vanilla javascript approach might look like the following.
var div = document.createElement('div');
div.innerHTML = document.body.innerHTML;
div.querySelectorAll('script').forEach(function(scriptTag) {
scriptTag.parentNode.removeChild(scriptTag);
});
document.body.innerHTML = div.innerHTML;
<div>
A div
</div>
<script>
console.log('hi');
</script>
<p>
A paragraph
</p>
Using jQuery you could try something like:
var $clone = $('<div>').append($('body').html())
$clone.find('script').remove()
Then when you want to replace:
$('body').html($clone.html())
Note that all event listeners will be lost with this approach

Easiest way to remove nested tags [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking for the easiest way (coding and execution time) to remove nested tags from a DOM element using javascript.
Example case:
<i><b>This <b><i>is <u>a</u> new</i></b> test</b></i>
Wanted solution:
<i><b>This is <u>a</u> new test</b></i>
The solution needs to work generally with all possible html tags and not just for the above example.
All nested tags need to be eliminated while keeping the inner HTML in the DOM.
The solution may but doesn't need to use jQuery.
Any suggestions?
You could try that for simplicity:
$("body *").each(function () {
if ($(this).parents(this.nodeName.toLowerCase()).length) $(this).contents().unwrap();
});
-DEMO-
Using the find method you could search for all children of the <b> tag inside the <i> tag:
JS:
$('i b').find('b', 'i').contents().unwrap();
This is a minor improvement to A.Woffs solution regarding code execution.
This way one jQuery element less gets initialized per dom node.
But i won't change the accepted answer to this answer for such a minor improvement.
$("body *").each(function () {
var $this = $(this);
if ($this.parents(this.nodeName.toLowerCase()).length) $this.contents().unwrap();
});

Temporarily comment out <script> tag for debugging [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Often while coding and debugging I might want to comment out a <script> tag. An example might be when doing the following:
<script src="lib/jquery.js"></script>
<!--script src="lib/jquery.min.js"></script-->
I tend to add the new line instead of just changing the original to act as a reminder that I want to put that back before going live. I got this syntax from a colleague but I had never seen this it before. Is there a syntactically correct method to comment out <script> tags in HTML?
EDIT: I know there are lots of discussions about commenting out scripts in order to hide them from older browsers but that is not what I am doing. I am wanting to hide the tag completely.
One option would be to dynamically load your scripts in, given a debug flag. For example:
Markup:
<script src="lib/include.js"></script>
include.js
var IS_DEBUG = true;
if(IS_DEBUG) {
loadScript("jquery.js");
loadScript("anotherscript.js");
}
else {
loadScript("jquery.min.js");
loadScript("anotherscript.min.js");
}
function loadScript(name) {
var elem = document.createElement("script");
elem.src = name;
document.getElementsByTagName("head")[0].appendChild(elem);
}
That means you can just toggle the IS_DEBUG flag to load in the required scripts. This is a very rudimentary example, but you get the idea. You might even be able to tie this in with something like require.js

Can I place <script></script> inside <script></script> [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I need to load a advert contained in a set of script tags inside some script tags is it possible ?
When you use a <script> HTML tag what is inside is treated as a quoted (literal) string, so the inner </script> tag inside is treated as a closing tag rather than as a portion of the string. So you cannot directly use the tag inside a script section.
If you must, user2310289's approach is valid or you could also use string concatenation -
eg:
"</sc"+"ript>");
You could try some thing like
var x = '<' + '/script>'; // or
var x = '<\/script>';

Get parent div id of second javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a div which is like this:
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
I basically want to get the ID of the div it is inside.
I have tried using jQuery and classic javascript to do this but it keeps returning undefined.
Does anyone have any idea's? Thanks
Since broswer read the code from up to down, you can do this:
Vanilla JS
var scriptTags = document.getElementsByTagName('script');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
jQuery
var id = $('script').last().parent().prop('id');
when it will read this code, the last script tag is the one the browser is reading.
Here's a fiddle : http://jsfiddle.net/nb234/
Check this out http://jsfiddle.net/78N9A/1/
<div id="parent">
<script id="scr">
function show()
{
alert('hello');
}
</script>
</div>
window.onload = function(){
var ele = document.getElementById('scr').parentNode;
alert(ele.id);
}
<script id="script">
Then
$('#script').parent();
If I understand correctly, you are saying that the id on the parent div is unknown in advance, and you want to use JS to determine what it is.
If you can't edit the script tag to add an id, maybe you could do a document.write() within that block to add in a little hidden element, then you can test to see what that element's parent is.
http://jsfiddle.net/AtRYF/
JAVASCRIPT:
Give your script an ID and then use parentNode to move up the DOM.
var the_div_you_want = document.getElementById("skript").parentNode.id;
JQUERY:
Pretty sure .parent() is what you're after
$('#scriptId').parent().attr("id");
Regardless, you need to find some way to locate the script and the move up the dom to find that relationship. Hope this helps.
http://jsfiddle.net/Zbuf8/1/
jQuery(document).ready(function($) {
$('div').attr('id');
});
should get you the value you need.

Categories

Resources