Accessing HTML elements within JavaScript objects

Question

Accessing HTML elements within JavaScript objects

Whenever I generate a new element dynamically using JQuery like this:

$("<div>",{id : "list"}).html("hello").appendTo("body");

and then create a JavaScript object with the selected element like so:

var obj = {el : document.querySelector("#list") }

Surprisingly, even after removing the element, when I print obj.el, it still shows:

<div id="list">hello</div>

I am able to change the content using obj.el.innerHTML = "foo"; But even after deleting the element with:

$("#list").remove();

The element is still present in the object obj. When printed, obj.el continues to show:

<div id="list">hello</div>

Why does this happen? Is there a more efficient way to store reference to an element without having to save a complex nested CSS selector which could impact performance?

javascript jquery html css

Answer 1

Answer №1

Check out this helpful example that might assist you.

// consider this sample code: $("<div>",{id : "list"}).html("hello").appendTo("body");
var obj = {
  a : 5
};

// let's create another object for better understanding
var obj2 = {
  a : 3
};

document.write(obj.a + "<br>"); // 5
document.write(obj2.a + "<br>"); // 3

obj2.a = obj.a;

document.write(obj2.a + "<br>"); // 5

$("#list").remove();
delete obj.a;

document.write(obj2.a + "<br>"); // 5

obj2.a = obj.a;
document.write(obj2.a + "<br>"); // undefined

If you try the following in your scenario:

$("#list").remove();
var obj = {el : document.querySelector("#list") }

I believe that obj will be undefined!

Answer 2

Check out this helpful example that might assist you.

// consider this sample code: $("<div>",{id : "list"}).html("hello").appendTo("body");
var obj = {
  a : 5
};

// let's create another object for better understanding
var obj2 = {
  a : 3
};

document.write(obj.a + "<br>"); // 5
document.write(obj2.a + "<br>"); // 3

obj2.a = obj.a;

document.write(obj2.a + "<br>"); // 5

$("#list").remove();
delete obj.a;

document.write(obj2.a + "<br>"); // 5

obj2.a = obj.a;
document.write(obj2.a + "<br>"); // undefined

If you try the following in your scenario:

$("#list").remove();
var obj = {el : document.querySelector("#list") }

I believe that obj will be undefined!

Answer 3

Answer №2

If you want to enhance the el property, consider using getter and setter functions. Instead of directly storing the element in el, assign its value dynamically when it is accessed.

Try implementing it like this:

var obj = {
  get el(){
    return document.querySelector("#list");
  }
}

For a helpful demonstration, check out this demo.

Answer 4

If you want to enhance the el property, consider using getter and setter functions. Instead of directly storing the element in el, assign its value dynamically when it is accessed.

Try implementing it like this:

var obj = {
  get el(){
    return document.querySelector("#list");
  }
}

For a helpful demonstration, check out this demo.

Accessing HTML elements within JavaScript objects

Answer №1

Answer №2

Similar questions

Z-index creates an obstacle that prevents items from being clicked on

Guide to implementing if statements within a map function in JavaScript/Vue.js

Using JavaScript AJAX to send a PHP POST request

Is it advantageous or detrimental to have a function within a React render return?

Flex-wrap functionality in versions of Safari 6 and earlier

Finding the identifier for resources through excluding external influences

Why isn't the custom script in my WordPress plugin executing properly?

Message port in Chrome extension has been closed without receiving a response

Implementing Vue.js click event behavior on a component within the template

What could be causing this code to malfunction on a mobile device?

Unnecessary Extra Spacing in Every <li> Tag

Cufon Superfish conceals dropdown menu text on Internet Explorer 8

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Issues with Jquery $.ajax functionality not being successful

What makes CSS so intricate and challenging to navigate?

What is the most effective method for creating and removing a component just once in a React application? (Is it acceptable to use unused setters from useState?)

The message "The property 'layout' is not found on the type 'FC<WrapperProps>' in Next.js" is displayed

How can I programmatically close an md-select when a button is clicked within the md-select?

Utilize React Helmet for Dynamic Page Titles

Unable to perform a setter operation within a loop structure