var board_code_clone = $('#board_code').contents().clone(false);
alert( board_code_clone.filter('div').eq(x).children().eq(y).text() );//make this right
i want to have a code equivalent to this
$('#board_code_dup > div').eq(x).children().eq(y).text();
My intention for this is to have a clone copy of the code they type on #board_code and then i will be trying to manipulate it using board_code_clone and then append the manipulated board_code_clone to the html dom
If I'm understanding correctly, you can just do your clone, make the modifications and then append back to the DOM, just as you said:
// Get the contents
var clone = $('#board_code').contents().clone(false);
// Do your manipulations
var edited = // modify `clone` as necessary
// Append back to the DOM
$('#new_content').append(edited);
Related
I am using jQuery and everything works fine except a few stuff. There are a few things you cannot do with the jQuery format of an element but only with the simple JS format. Especially, when using the hasAttributes() in simple JS.
This works:
let fooDiv = document.getElementsByTagName("div")[0];
console.log(fooDiv.hasAttributes()); //returns false as expected
let barDiv = document.getElementsByTagName("div")[1];
console.log(barDiv.hasAttributes()); //returns true as expected
<div>foo</div>
<div id="id">bar</div>
This doesn't:
let fooDiv = $(document.getElementsByTagName("div")[0]) //creates a jQ object
console.log(fooDiv.hasAttributes()); //error
let barDiv = $(document.getElementsByTagName("div")[1]) //creates a jQ object
console.log(barDiv.hasAttributes()); //error
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>foo</div>
<div id="id">bar</div>
I am aware that the jQuery hasAttr() exists but I want to get the JS format of a jQuery object. There are a lot of differences, for example the jQuery creates an object but otherwise it is a html node list.
Initially, my question is:
How do I get the html node list or html element or the simple JS format of a html element(s) from jQuery?
To expand on what blex said in the comments ... when jQuery is used to select an HTML element, the raw HTML is always collected in an array as part of the variable you assign it to. For example, using your code:
// grab the element or elements
let fooDiv = $(document.getElementsByTagName("div")[0]);
// lets see the HTML!
consoe.log( fooDiv[0] );
The HTML itself will be exposed in that array, allowing direct access to the HTML and its properties... for example:
console.log( fooDiv[0].innerHTML );
or
console.log( fooDiv[0].tagName );
Everything I've read says do not save custom properties or attributes to HTML DOM Elements. So I'm trying to figure out how else I should save properties/attributes for an element such that I can access them later.
Originally I was thinking of using the element as the key in a hash but JS converts hash keys to string so that won't work.
Use case:
function do1(element)
{
var w = element.style.width;
element.style.width = "200px";
// i want to save the w variable for this element somewhere/somehow
}
function do2(element)
{
// i want to be able to get the w variable i saved earlier for the element
}
I thought of using the element's ID but the element won't always have an ID that I can use and I can't set one because there might be other JS that dynamically sets IDs for elements.
Why not use data attributes? They're specifically intended for storing extra data on an element.
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');
Let's say I have two <div> elements in the DOM. I can easily switch their markup between them with jQuery, like so:
function switch_html(el1, el2){
var el1_content = el1.html();
var el2_content = el2.html();
el1.html(el2_content);
el2.html(el1_content);
}
However, how do I actually switch the DOM elements, and not just copy & switch the HTML source? For example, in the app I am currently developing, I am swapping out <div> contents that include filled out <input> fields. If the source HTML of these fields is merely copied, then the values contained within the inputs will be lost.
You can move the actual DOM nodes using jQuery append / element.appendChild. Move the actual DOM nodes, don't try to make copies/clones.
Try this:
var children1 = $('#el1').children();
var children2 = $('#el2').children();
$('#el1').append(children2);
$('#el2').append(children1);
javascript has a cloneNode() function which performs a "deep" clone when true is passed.
So:
function switch_html(el1, el2){
var el1Clone = el1.cloneNode(true);
var el2Clone = el2.cloneNode(true);
el2.replaceNode(el1Clone);
el1.replaceNode(el2Clone);
}
Or for a (slightly) more performant solution:
function switch_html(el1, el2){
var el2Clone = el2.cloneNode(true);
el2.replaceNode(el1);
el1.replaceNode(el2Clone);
}
Please note, that the assumption here is you want to do this in raw JavaScript, ie: no jQuery
I was playing with firefox 3.6 and wanted to add a translation to an svg element when clicked; this element already had other translations on it.
var svgs = document.getElementsByTagName("svg:svg");
var group = svgs[0].childNodes[1];
group.addEventListener("click",function(e){
var group2 = group.cloneNode(true);
group2.setAttribute("transform", group2.getAttribute("transform")+" translate(10,10)");
svg2.insertBefore(whole2, whole);
},false);
But another way to do the setAttribute line would be:
group2.translate.baseVal.appendItem(newSVGTransformTranslation);
Where I'm getting stuck is I can call
newSVGTransformTranslation =
new SVGTransform(SVGTransform.SVG_TRANSFORM_TRANSLATE);
but the resulting object does not have the setTranslate(x,y) method that I expect; nor any setters. Oddly group2.translate.baseVal.getItem(0) does have it, but no clone or copy methods are available.
I must be using the constructor incorrectly. Does anyone have an example of the correct form?
See SVGSVGElement.createSVGTransform.
An example:
var tfm = svgroot.createSVGTransform();
tfm.setTranslate(x,y);