Using innerHTML for partial HTML [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
the following function
<script>
function new_par()
{
var beginning="<input id=";
document.getElementById("debug").innerHTML=beginning;
}
</script>
produces no output, although if I remove the "<" sign, it does. Presumably the javascript avoids an output that would destroy the html page, but would there be anyway to force the output?

You're assigning it to a node's innerHTML property. When you plug the string into the DOM it's trying to parse it as though it were HTML. If you were to simply add it as a text node it would appear.
var beginning="<input id=''";
document.body.textContent = beginning;
https://jsfiddle.net/2patzyo1/
Edit: upon looking again at your question, if you are trying to get the input element to appear on the page, the string you're using isn't proper HTML because you never closed the tag. When the browser runs into it, it tries to parse and render it, but because it isn't valid it gives up. This will work:
var beginning="<input id=''>";
document.body.innerHTML = beginning;
https://jsfiddle.net/2patzyo1/1/

Related

Why does .innerHTML edit the src attributes? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm making a chrome extension and trying to replace a certain word with another.
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.innerHTML = element.innerHTML.split(word).join("████");
}
The above code edits src and srcset attributes as well.
element.innerText and element.Textcontent removes all the CSS from the webpage.
Unfortunaly inner/outerHTML are changing all child elements too what causes them to be re-rendered by the browser (even if not changed). this also means you may "replace" some text multiple times if your selector received elements from all levels and the replacement text contains the original text too.
So the proper way is to change just the text-elements without touching the child-elements. This way you will not experience any of the mentioned problems:
let word = "yourword"
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.childNodes.forEach(function(el){
if (!el.nodeValue) return;
el.nodeValue = el.nodeValue.split(word).join("████");
});
});

Why is my external script not included and how to change inner HTML [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am working on a basic website and I'm trying to use JS to make "video-navigator"
The thing is:
my external script is not being included
So this is my HTML for including my JS
<script src="script.js"></script>
Click here for the entire site
You have a few issues with this. Firstly you're trying to set the innerHTML incorrectly which is failing. Secondly you're using a reserved word for a function (new). In the pop function I've commented out your incorrect bit and added a correct version. I've also renamed your function to new_renamed so that it works.
alert("working");
function pop()
{
alert("INVALID INPUT");
//HTMLDivElement("content") innerHTML = "";
document.getElementById('content').innerHTML = '';
}
function old()
{
alert("INVALID INPUT");
}
function new_renamed()
{
alert("INVALID INPUT");
}
Above will log.

add and remove html elements to jquery variable [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have a JS variable like this:
var elmnts = $('#elm1, elm2, #elm3, #elm4')
how can i add and remove other html elements?
i try this code but there is no result.
elmnts.add('#elm5');
elmnts.remove('#elm1')
$.fn.add returns new collection, it doesn't modify original one. So you should use this syntax.
elmnts = elmnts.add('#elm5');
To remove element from a collection of jQuery objects you can use $.fn.not method:
elmnts = elmnts.not('#elm1');
You should not use remove for this, it's used to delete element from DOM tree.

Split a javascript string between two HTML tags [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a javascript string which contains a HTML code to be loaded into my app. The issue I am finding is that the string has a bunch of tags in the head tags which just displays as text at the top of the content. How can I remove all the content of the string bar whats between the two body tags?
E.g.
<html><head><meta>...</meta><style>...</style></head><body><div>...</div></body></html>
Needs changing to:
<div>...</div>
Thanks
You can use code below but you better change the service that returns html result.
var s = "<HTML><head><meta><head><body>YOUR HTML</body></html>"
var body = "<body>";
var bodyEnd = "</body>";
var res = s.substring(s.indexOf(body)+body.length,s.indexOf(bodyEnd));

JQuery append() adding quotes and newlines and I don't know why [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have an append statement that adds a single character at a time to a span. (The characters are pulled from a string by treating it like an array: text[i] and such.) I feel like it should be giving me this:
<span id="outputid0">text</span>
But instead it's giving me this:
<span id="outputid0">
"t"
"e"
"x"
"t"
</span>
I guess it makes sense, and this is not a real problem at the moment, but it is a bit awkward-looking and I'm not sure why it's happening. Can anyone explain this one for me?
Edit: Here's a link to JSFiddle, showing an example of what I was talking about. Thank you to ᾠῗᵲᄐᶌ, who seems to have diagnosed and solved the problem just fine without that. If anyone else would like to see it, there it is.
Append adds a child node after the last child node so each character is going to be a text node and that is why they are separated like that
If you want to add a character at a time you're better off taking whats there and concatenating the char to the string that's already there
You can do it like this using jQuery's .text(function(){}) function
// where i = index and v = current text value
$('#outputid0').text(function(i,v){
return v + "your new char";
});
FIDDLE EXAMPLE
If I was a betting man, I'd say you are looping thru an array to generate what you want. Do something like this: Remember, I am only assuming how the data is setup - and only showing for example purposes.
var arr = ['t','e','x','t'];
// just '.join' the array
<span id="outputid0"></span>
// following in script tag
jQuery('#outputid0').text(arr.join(''));
Just to reiterate what Ehsan mentions above. You really need to include your code so there is no 'assuming' or 'guessing' at what you want to accomplish :-)

Categories

Resources