use innerHTML to change dynamically created objects of a page - javascript

.Hi guys! is it possible to use .innerHTML to change my textbox named text1 which is dynamically created using .appendChild? help please! TIA!

yes, it is.
<body>
<div id="test">
<p>initial text</p>
</div>
<script type="text/javascript">
var myDiv = document.getElementById('test');
var p = document.createElement('p');
p.innerHTML = "This is innerHtml";
myDiv.appendChild(p);
p.setAttribute('id', 'text1');
</script>
</body>

Related

getElementById("demoname").value return undefine

My JS code return undefined. The tag is goog, but value is missing. why?
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").value);
}
</script>
</body>
p tag doesn't have a value. It have textContent. Only input elements have value attribute
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").textContent);
}
</script>
</body>
YOu need to alert the innerHTML, not the value
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").innerHTML);
}
</script>
</body>`
<p> tag is not having value. You can choose to use textContent, innerHTML or innerText. All of these has benefits and limitations.
If you only want text written in <p> then you should use textContent
textContent is not supported in IE8 or earlier
Example
<p id=“demo”><ul><li>mytext</li></ul></p>
var x=document.getElementById(“demo”);
var output = x.textContent;
Output
mytext
If you want text with Html (like UL, LI ) from <p> then you should use innerHTML
var output = x.innerHTML;
Output
mytext
innerHTML is supported by all browsers
You can also use innerText.
innerText will not include text that is hidden by CSS, but textContent will
So choose as per your requirement.
Try using the .innerHTML property instead.
alert(document.getElementById("demo").innerHTML);

Search text in html by javascript

I have some html like this:
<html>
<body>
<div>
<p>Something</p>
</div>
<div class="hide" id="show">Protected</div>
</body>
</html>
I need to display or hide/show an element via JavaScipt if html has "Something" in its text. How can I do that? I need this for my Wordpress page.
Without using jQuery:
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("Something")!==-1;
if (hasText) {
document.getElementById("show").style.display = 'block';
} else {
document.getElementById("show").style.display = 'none';
}

How to inactivate parts of html code by Javascript

A JS newbie question:
I would like to inactivate a part of a html code (which I manually would do by <!-- ... -->) by Javascript, depending on a numeric variable (which I extract from the file name): If var > 10 do inactivate the code.
EDITED:
If possible only simple Javascript!
A demo html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var param = 10;
</script>
</head>
<body>
<p>Paragraph One</p>
<p>Beginning of the part to be removed if param > 10</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
<p>Paragraph Ten</p>
</body>
</html>
Put everything you want to remove/hide inside one div with a specific class or id, then add an if condition and hide or remove the required div once the condition is true.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<p>Paragraph One</p>
<div id="to_remove">
<p>Beginning of the part to be removed</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
</div>
<p>Paragraph Ten</p>
<script type="text/javascript">
var param = 11;
if(param >10) document.getElementById("to_remove").remove();
//OR if you want to show the div later use this:
//if(param>10) document.getElementById("to_remove").style.display = 'none';
</script>
</body>
</html>
You can remove the elements from the DOM, e.g. by using removeChild():
document.getElementById('div').removeChild(document.getElementById('p2'));
<div id="div">
<p id="p1">Paragraph one</p>
<p id="p2">Paragraph two</p>
</div>
You can use css property for the same, add two classes active and inactive with css .active{display:block} and .inactive{display:none}.now you can use jquery to add and remove active and inactive classes according to your condition.like in jquery you can write
if(var > 10){
$("div").addClass('inactive');
}else{
$("div").removeClass('inactive');
}
A CSS + jQuery way of achieving this could be by adding the class disabled:
if(condition) {
var element = document.getElementByID('#sample_ID');
element.addClass("disabled");
}
This is assuming that you contain the code to be disabled in the <div id="sample_ID">
If you just want to hide it, you can do this by using CSS.
E.g. to hide <div id="myDiv">Bla</div> you'd use this:
var element = document.getElementById("myDiv");
element.style.display = "none";
And if you want to show it again at some point:
element.style.display = "block";
Live example:
function hideDiv() {
var element = document.getElementById("myDiv");
element.style.display = "none";
}
function showDiv() {
var element = document.getElementById("myDiv");
element.style.display = "block";
}
#myDiv {
border: solid 1px green
}
<button onclick="hideDiv()">Hide</button>
<button onclick="showDiv()">Show</button>
<br/>
<div id="myDiv">Bla</div>

div into array using map function

I m adding child divs of main div into array by id
but couldn't get what is the problem.......?
after adding into array i waant to send to ajax to write in csv
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the array into a String.</p>
<div id='main'>
<div id='a'>
dab
</div>
<div id='b'>
nav
</div>
</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var array = $('#main id').map(function() {
return $(this).val();
}).get();
array.toString();
document.getElementById("demo").innerHTML = array;
}
</script>
</body>
</html>
Try to use attribute selector properly,
var array = $('#main [id]').map(function() {
return $(this).text();
}).get();
Also .val() is a jquery function is specially for the elements which yields value property when accessing it on a node object. So when you want to access the content inside a div, you have to use .text()

replace all images with inputs elements jquery

i need find all images from textarea value and then replaces with inputs text elements
and the value of those with the src of the img was reemplace
after that the final string is output on a new div ('#newDiv')
my script dont replace nothing i dont know why
here is what i have done so far,
<html>
<head></head>
<body>
<textarea id="caja"></textarea>
<input type="button" onClick="parsingHtml()" value="read">
<div id="newDiv"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
function parsingHtml()
{
var content = $('#caja').val();
var newContent = $(content).find("img").replaceWith('<input type="text">');
alert(newContent)
$('#newDiv').html(newContent);
};
</body>
</html>
any ideas? thanks in advance!
There are 2 problems that I can see
newContent is referring to only the img elements, not the complete content
Since you are passing the value to jQuery, if the value does not start with < it will be considered as a selector not as a element creation command
So
//dom ready handler
jQuery(function($) {
//click event handler registration
$('#read').click(parsingHtml);
})
function parsingHtml() {
var content = $('#caja').val();
var newContent = $('<div />', {
html: content
});
newContent.find("img").replaceWith('<input type="text">');
console.log(newContent)
$('#newDiv').html(newContent.contents());
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="caja"></textarea>
<input type="button" id="read" value="read">
<div id="newDiv"></div>

Categories

Resources