how to wrap a html string - javascript

Why won't this jquery object of p tags get wrapped by the div. I know the documentation says that it must be a dom element but there has to be a way?
WHY DOES IT ONLY ALERT test1?
http://jsfiddle.net/scwonubb/
var s = '<p>test1</p><p>test2</p><p>test3</p><p>test4</p><p>test5</p><p>test6</p><p>test</p>';
var $d = $(s).wrapAll('<div class="mydiv">');
var final = $d.html();
alert(final);

That is because you variable $d is the jQuery object of your variable s even if you have wrapped it. Try alerting the parent, it will be the div :
var final = $d.parent().html();
Fiddle : http://jsfiddle.net/scwonubb/1/

.html() gets the contents of what you have selected.
Change it to $d.parent().html() and it will work.

Related

get content of some tags inside a variable

var a = $('#txta').val();
console.log(a);
result is complete html code from this url
Now I want to get content of all #artikal-naziv tags (there are 96)
var b = a.find("#artikal-naziv").text();
console.log(b);
Result:
Uncaught TypeError: a.find is not a function
Any help?
Actually you are calling .find() on a string and not in a DOM element.
Because from $('#txta').val() you are getting a string, that's why you got Uncaught TypeError: a.find is not a function, because string doesn't have .find() method.
You should change it to:
var a = $('#txta');
Then you can write:
var b = a.find("#artikal-naziv").text();
Note:
Now I want to get content of all #artikal-naziv tags (there are 96)
You can't set the same id #artikal-naziv for multiple elements (96), the id should be unique in the page.
Another thing .val() call assumes that your element is a form element, you can't call .val() on a div or a span, if it isn't a form element use .html() instead.
Because "a" is not a jQuery object - it's usually a string containing value of the returned element (txta).
Use $(a).find(...) instead - that will probably do it.
Ref link: https://stackoverflow.com/a/3532381/3704489
As per what I can make out of your description, you are getting HTML as string using var a = $('#txta').val();. If this is true, you will have to create an in-memory element and set this string as its HTML.
Then you will have an in-memory DOM section that you can query on.
You can try something like this:
var html = '<span><p id="artikal-naziv">bla bla</p></span>';
var $tempElement = $('<div>').html(html);
console.log($tempElement.find('#artikal-naziv').text());
// or using vanilla JS
var tempElement = document.createElement('div');
tempElement.innerHTML = html;
console.log(tempElement.querySelector('#artikal-naziv').textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
.val() takes out the value from the element....Whereas all DOM operations are done on the element... because function like .find() , .hide() , .show() , .closest() etc are used with the element not the value
The Following modifications should work...
var a = $('#txta'); // $("#ID") returns the element
console.log(a.val()); // $("#ID").val() returns the value
the result is complete html code from this URL
Now I want to get content of all #artikal-naziv tags (there are 96)
var b = a.find("#artikal-naziv").text(); // .find() easily works on element
console.log(b);
Simply use .find to find children and .closest to find parents:
<div class='a'>
<div class='b'>
<div class='c'></div>
<div class='c'></div>
<div class='c'></div>
</div>
</div>
js:
var a = $('.b');
a.find('.c'); // Will return all the objects with the class c
a.closest('.a'); // Will return the first parent with the class a

How can I get the value of an HTML tag using JS

Okay guys, I do have another thread related to this one, however this is a new question.
I have this code in my HTML page:
<span class="licon liconspan">1</span>
Now how can I get the value of "1" into a JS variable?
Actually "1" is not a value of a tag, it is its content. In its turn, it is stored in innerHTML property of a certain element. For your particular case, you can access it like this:
var variable = document.querySelector('.liconspan').innerHTML;
you must write the index [0] because the method document.getElementsByClassName
return an array
var element = document.getElementsByClassName(".liconspan")[0];
var variable = element.innerHTML;

How can I use Javascript to get the value of an element that was populated by a POST request?

I'm building an HTML page that receives data from another page with the below code
$arrayPosition = $_POST['arrayPosition'];
echo '<span id = "arrayPosition">'.$arrayPosition.'</span>';
I'm then trying to use javascript to get the value of the element and pass it to a function with the below code
var initialPosition = document.getElementById('arrayPosition').value;
function displayWork(position){
$("#displayArtwork").detach()
.append(holdImages[position])
.hide()
.fadeIn("fast");
}
When I alert the value of initial position to the screen it informs me that null is its value, however, when I inspect the element it looks like this
<span id="arrayPosition">4</span>
Am I making some really stupid error, or misunderstanding the way to access this posted data?
Thanks for your help!
Since arrayPosition is a span, it has no value. You can get its innerHTML:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Or using jQuery:
var initialPosition = $('#arrayPosition').text();
A span-element has no value. Only form-elements can contain the value-attribute. To get the text inside your span you can use the innerHTML-porperty:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Demo
As you are already using jQuery you can also use it's text()-function:
var initialPosition = $('#arrayPosition').text();
here you can also use:
$(document.getElementById('arrayPosition')).text();
Harder to maintain and more difficult to read but faster than the jQuery-Selector. (see here)
Demo 2
Reference
.innerHTML
.text()

jQuery: easier way to use .clone() than described below?

If you execute in the console on this page
var cloned = $(".question").clone(true);
$(".question").addClass("first");
var clonedStr = cloned[0].outerHTML || new XMLSerializer().serializeToString(cloned[0]);
$(".question").after(clonedStr);
you will clone the question (there will be two questions on the page, but the first one will be with the .first class). That's what is needed.
Is there any simpler way to do this with jQuery? I'm confused of the third string in the code above and believe it could be simpler. Any ideas?
Thank you.
If you don't use the HTML as string, then don't get it. Just use the jQuery object:
var cloned = $(".question").clone(true);
$(".question").addClass("first").after(cloned);
Also, you can do it one line:
$(".question").after($(".question").clone(true)).first().addClass("first");
You could use insertAfter to insert the cloned element after changing the class. You don't need to convert the element in the jQuery object to a string, you can use that object within the function itself:
var $question = $('.question');
var $cloned = $question.clone(true).insertAfter($question);
$question.addClass('first');

Add html string to DOM as element

Is there anyway to create a string and add to the DOM? And having Javascript to understand the elements in the string?
I tried the below and 4th line gives error:
var bmdiv = document.createElement('div');
bmdiv.setAttribute('id', 'myDiv');
var str = "<b>aa</b>";
bmdiv.innerHTML(str);
I need to add several tags in str to the DIV myDiv
I need NOT to use jQuery since the script will not load jQuery
Thanks.
The innerHTML property is not a function, you should assign it like this:
var bmdiv = document.createElement('div');
bmdiv.setAttribute('id', 'myDiv');
var str = "<b>aa</b>";
bmdiv.innerHTML = str;
Try
bmdiv.innerHTML = str;
Another way to do this is to manually create the DOM structure for each of the tags, then append them into the div.

Categories

Resources