Javascript - clearing everything inside a div - javascript

I have div:
<div id="socialUserList">
//some content here, htmlTags, text, etc.
</div>
Now, I want everything inside of that div to be wiped out. I am trying this:
$("#socialUserList").innerHTML = '';
But for some reason it doesn't want to work. Why?

The normal JavaScript method:
document.getElementById('socialUserList').innerHTML = '';
In jQuery:
$('#socialUserList').html('');
Pure JavaScript and jQuery go hand in hand, like so:
From pure JavaScript to jQuery:
var socialUserList = document.getElementById('socialUserList');
console.log($(socialUserList).html());
From jQuery to pure JavaScript:
var socialUserList = $('#socialUserList');
console.log(socialUserList[0].innerHTML);

Have you tried:
jQuery('#socialUserList').empty();
Note: You may have also tried this:
jQuery('#socialUserList')[0].innerHTML = '';
Using the [0] will access the DOM object of the first matching element.

Related

Add complexe Javascript array elements to HTML [duplicate]

I have a template:
function useIt() {
var content = document.querySelector('template').content;
// Update something in the template DOM.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
document.querySelector('#container').appendChild(
document.importNode(content, true));
}
<button onclick="useIt()">Use me</button>
<div id="container"></div>
<template>
<div>Template used: <span>0</span></div>
<script>alert('Thanks!')</script>
</template>
You can try the code here.
This code basically copies the template(html5 templates does not render on your screen) into another div. This allows you to reuse the DOM.
Problem: The line "span.textContent = parseInt(span.textContent) + 1;" changes the template code directly. I need to manipulate the content DOM and clone it into the container, without changing the template. This is very important since if I want to reuse the code, I need it to stay the same.
I have tried multiple ways to use jQuery to mimic the above javascript code, but I can't manage to figure it out. It would be better if there is a jQuery way.
If you NEED to use the new <template> tag, then you are mildly stuck . . . your cleanest alternative is to use importNode to bring in the content and then modify it after it's been appended.
Assuming that the templated code is realtively small, this should happen fast enough that you would never notice the difference in approach, though, in this specific example, the alert(), would delay the change of the content, so you would see "0", until you clicked "Okay", and then it would update to "1".
The code change for that would be:
function useIt() {
var content = document.querySelector('template').content;
var targetContainer = document.querySelector('#container');
targetContainer.appendChild(document.importNode(content, true));
var $span = $(targetContainer).find("div:last-of-type").find("span");
$span.text(parseInt($span.text() + 1));
}
If you are not married to the idea of <templates>, you could use jQuery's clone() method to do what you want to do, very easily . . . but, clone does not "see" the content of a <template>, due to the special nature of that particular element, so you would have to store the templated code some other way (JS variable, hidden div, etc.).
HOWEVER, this method will not work if you need to clone a script, the way that a <template> will. It will not trigger any script code in the "template container" element when the cloned version is created or appended. Additionally, if you store it in a hidden <div>, any script code in the "template container" element will trigger immediately on page load.
A simple version of the code for the clone() approach would look something like this:
function useIt() {
var $content = $("#template").clone();
var $span = $content.find("span");
$span.text(parseInt($span.text()) + 1);
$content.children().each(function() {
$("#container").append($(this));
});
}
Assuming that your template was:
<div id="template" style="display: none;">
<div>Template used: <span>0</span></div>
<script>alert('Thanks!')</script>
</div>
You could also move the <script>alert('Thanks!')</script> out of the template and into the script section (after you completed the "append loop"), to achive the desired alert functionality, if you wanted to.
It's an old question, but, did you try cloneNode(true)? It works on templates, as this:
var span = content.querySelector('span').cloneNode(true)
regards.

Javascript movecontent from one div to another

I have the code that actually works:
<script type="text/javascript">//<![CDATA[
function MoveContent() {
var srcObj = document.getElementById("src");
var destObj = document.getElementById("dest");
destObj.value = srcObj.innerHTML;
}
//]]>
</script>
But I need to move content from 2 divs which isn't possible using this code.
I don't know JavaScript, so what should I add tho this code?
Sorry for bad English, thanks in advance
I suggest you use jQuery library. Have you heard of it?
http://jquery.com/
Simple code to accomplish your goal:
var srcHtml = $('#src').html();
$('#dest').html(srcHtml);
Use:
destObj.innerHTML = srcObj.innerHTML;
value is the value of an input element, innerHTML is the content of a DIV or other element.
Assuming Both are div's rewrite the following line
destObj.value = srcObj.innerHTML;
as
destObj.innerHTML= srcObj.innerHTML;
Since div is not having an attribute value you cannot copy the content to the destination div using value.
Like you get value from one div using
var srcObj = document.getElementById("src");
get another variable like srcObj2 and store the next div. Concatenate values of two variables and set it to the destObj

Apply jquery to a code inserted with javascript

I have this line of code which is inserted via JS when the localDB is ready.
//
boxOne = document.getElementById("box1");
content = '<button data-icon="delete">Delete</button>';
boxOne.innerHTML = content;
//
The problem with this code is that mobilejquery should read data-icon="delete" and add the class's for the icon to appear but its not doing that.
I can simply add the class's manually by my self but this is also causing me trouble when I am trying to apply a validation library to a form that is inserted by JS the validation wont work.
So how can I make jquery & any library that I use Reads this inserted JS code.
I think you mean to put content inside boxOne. As it stands your trying to insert a DOM object (itself) into the innerHTML:
boxOne.innerHTML = content;
JSFiddle
Or, since it's available to you, just use jQuery:
$btn = $('<button/>',{text:'Delete','data-icon':'delete'});
$('#box1').html($btn);
JSFiddle
The other answers show you how to add the button, but not how to get jQuery Mobile to enhance it.
If you are using jQM 1.4, call enhanceWithin() on the container:
var content = '<button data-icon="delete">Delete</button>';
$("#box1").append(content).enhanceWithin();
If you are using 1.3, call button() on the button object:
var content = '<button data-icon="delete">Delete</button>';
$("#box1").append(content);
$("#box1 button").button();
NOTE: in my example I use append() to add the content, you can still use html() if you prefer.
With jQuery, you can use html():
$('#box1').html('<button data-icon="delete">Delete</button>');

Finding $(this) after a function

So here's my problem: I'm using a function and I need the function to be specific to each tr with the class "middleone". It's supposed to change the insides of a div inside of the the tr with the class "middleone". But it's not working!
I know the recursive portion of it is working, and the "navigation" should be spot on, because even when i'm using just $(this) it doesn't do anything. When using document.getElementById it works fine but of course that only targets the first div and the full version of the code has to "Go here, pull from here, put it here, go to the next area, pull from here.. etc" Here's the testing code.
$('.middleone').each(function() {
var tripleeagain = $(this).find('div')
tripleeagain.innerHTML = "$";
});
Thanks for any help
tripleeagain is a jquery object collection upon which you should use html() instead of innerHTML
Basically you could just write:
$('.middleone').find('div').html("$");
If you are doing specific stuff inside the loop then:
$('.middleone').each(function() {
//Some specific logic
var tripleeagain = $(this).find('div').html("$");
});
The problem is you are trying to access native API from a jQuery object.
var tripleeagain = $(this).find('div');// this will return a jQuery object
So you should use the jQuery API for setting the html contents
tripleeagain.html("$");
jQuery html API documentaion

js - using replace method to replace html element

I have a question. I have a work this morning but i don't know how to do it.
My work here (html):
<div class="demo">
<p>this is demo text</p>
</div>
Here is my JS:
var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");
Look everything ok. But result is: this is demo <span>1234</span>. This isn't my result I want. How to make in this string become a HTMLelement by using replace method?
When assigning the value back, use .html() instead of .text() so it won't encode it, like this:
var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");
$(".demo").html(replacedata);​​​​​​
You can see a demo here
Also, you can pass a method to .html() if you're doing this to many elements, like this:
$(".demo").html(function(i, h) {
return h.replace("text","<span>1234</span>");
});​
Note this uses .html() as the source as well, but makes no difference for the example code.
You can see a demo of that here
document.getElementById('demo').firstElementChild.innerHTML =
document.getElementById('demo').firstElementChild.innerHTML.replace(/text/, "<span>1234</span>");

Categories