I am facing an issue in jquery , i want to add a css test class in body tag.
My code
(function($) {
if($("#root").length){
$("#root").closest("body").addClass('co_queue_page'); //not working
}
})(jQuery);
<div class="row"> //react code
<div id="root">
<div>
<header>
<div class="container-fluid">...</div>
</header>
</div>
</div>
</div>
what should i do? some help me help?
You don't need to use .closest() method, there is only one tag in HTML document, just do it by selecting the <body> directly:
(function($) {
if($("#root").length){
$("body").addClass('co_queue_page');
}
})(jQuery);
To select the <body> element, using jQuery, you can use:
const element = $(document.body);
const element = $("body");
Then you can use .addClass() to add your custom class dynamically, like so:
element.addClass("co_queue_page");
jQuery fiddle working example
This can be also done without any jQuery, accessing the body DOM element through the document object:
const element = document.body;
element.classList.add("co_queue_page");
Vanilla JS fiddle working example
Please add the below code:
$("body").addClass("class_name");
Related
When creating a next JS app you always have a root div just after the body div like this:
<body>
<div id="__next">
I am using a Javascript plugin that requires me to insert some code immdiately after the body tag. Like this:
<body>
//My code here
<div id="__next">
Is it possible to do this? If so How?
Yes, you can do using a prependTo function of JQuery as follows:
$(document).ready(function () {
$('<input type="text">').prependTo('body');
// in your case it would be
$('<div id="__next">').prependTo('body');
});
I have found the answer to my question is to create a _document.js file. This will over-ride the defult document that is created by next.
Documentation here: https://nextjs.org/docs/advanced-features/custom-document
any idea how to get css property using html method
$( document ).ready(function() {
var ans= $("#hello").html();
console.log(ans);
});
#hi{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">
<div id="hi" >
I am div
</div>
</div>
in this when i use html method ans doesn't contain color:red
<div id="hi" style="red;">
I am div
</div>
Thank you
this when i use html method ans doesn't contain color:red
That's correct. It's because there's nothing in the DOM structure that's being converted to HTML by the html method that contains the color, because it's applied by the CSS stylesheet rules instead.
There is no built-in method in either the DOM or jQuery that will give you an HTML string that converts all of the currently-applied CSS style rules to inline style values. If you wanted something like that, you'd have to build it yourself, using (amongst other things) the css function (if you're building it with jQuery).
You can apply css style to your html tag like below, without css style declaration
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var ans = $("#hello").html();
$('#hi').css('color','red');
console.log(ans);
});
</script>
<div id="hello">
<div id="hi" >
I am div
</div>
</div>
I have a div tag with class divstudent, lets say this is div1 tag. Now I want to create another div tag div2 dynamically below this div1 tag, not inside of the div1 tag. I want to create outside of div1 tag using javascript. How can I do that?
"div1"
<div class="divstudent"></div>
<!-- i want to be like this -->
<!-- "div1" -->
<div></div>
<!-- "div2" -->
<div></div>
<!-- "div3" -->
<div></div>
$(function() {
$("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
This is div 1
</div>
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divs creator</title>
<script type="text/javascript">
window.onload = function () {
var divReference = document.querySelector('.divstudent');
var divCounter = 0;
divReference.addEventListener('click', function () {
var divToCreate = document.createElement('div');
divToCreate.innerHTML = ++divCounter;
divReference.parentNode.appendChild(divToCreate);
}, false);
}
</script>
</head>
<body>
<div class="divstudent">
<input type="button" value="add div below divstudent">
</div>
</body>
</html>
Since this is tagged jquery, just use .after()
$(function() {
$("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
This is div 1
</div>
There are many ways to do this. One significant difference in methods is if you choose to create the elements first using Document.createElement() and then insert the elements, or create and insert the elements in one step using one of the methods that allows you to insert HTML text.
Because it is simpler, but not necessarily better, the examples below show creating and inserting the two <div> elements in a single step using methods that allow inserting HTML text into the DOM.
JavaScript:
One is to use insertAdjacentHTML() and specify that it is to be inserted afterend of the element you are using.
document.querySelector() is used to find the first <div class="divstudent">. Then insertAdjacentHTML() is used to add the additional <div> elements. Element.removeAttribute() is then used to remove the class="divstudent". Note: if we had just wanted to set teh class to something different, even '', then we could have used Element.className.
NOTE: In this answer, text identifying each <div> has been added to the <div>s so there is something visible in the examples in this answer.
//Find the first <div class="divstudent"> in the document
var studentDiv = document.querySelector('div.divstudent');
//Insert two new <div> elements.
studentDiv.insertAdjacentHTML('afterend','<div>2</div><div>3</div>');
//Remove the class="divstudent"
studentDiv.removeAttribute('class');
<div class="divstudent">1</div>
jQuery:
While your question is tagged jQuery, a comment you posted implies you are just using JavaScript. Thus, I am not sure if jQuery works for you.
If you want to use jQuery, then you can use .after() to add the <div> elements. You can then use .removeAttr() to remove the class="divstudent".
// Get the first <div class="divstudent">.
// Store it in a variable so we only walk the DOM once.
var $studentDiv = $('div.divstudent').eq(0);
//Add the two new <div> elements
$studentDiv.after('<div>2</div><div>3</div>');
//Remove the class="divstudent"
$studentDiv.removeAttr('class');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divstudent">1</div>
You create a new div (in js), then just append your newDiv, after the target div. Something along the lines of in vanilla js:
// Create your new div
var newDiv = document.createElement("div");
newDiv.innerText = "New Div!";
// Grab the div you want to insert your new div after
var target_div = document.querySelector("div.divstudent");
// Insert newDiv after target_div (before the thing after it)
target_div.parentNode.insertBefore(newDiv, target_div.nextSibling);
My Objective:
I'm using Polymer to create custom elements, attributes, and properties for a Flexbox Grid System.
[FX-Properties]
In an effort to help me debug my process visually, I need some javascript.
I want to append the text of all <elements>, [attributes] and "properties" inside the <body> to themselves with Javascript (only).
Currently, I'm doing this with css's ::before and ::after Pseudo Elements, but as you can imagine,,, this can be pretty time consuming!
What I've got so far: JS Fiddle
EXAMPLE:
If I had this:
<div id="div" class="ninja"></div>
I want to do this:
<div id="div" class="ninja">
<div id="div" class="ninja">
</div>
My guess is that the .attributes is what I need to work with, but I'm unsure on how to use properly.
<script>
var body = document.querySelector('body').attributes;
var main = document.querySelector('main').attributes;
var section = document.querySelector('section').attributes;
var div = document.querySelector('div').attributes;
</script>
[].forEach.call(document.querySelectorAll("*"),
function(el){
el.appendChild(
document.createTextNode(el.cloneNode(false).outerHTML));
});
https://jsfiddle.net/odbbybcy/
I'm new to javascript I'm having a very simple problem. I just don't get what's going on.
I just want to add a class to a <div> tag but it's not working
This is my javascript:
var element = document.getElementById("main");
element.classList.add("hidden");
Here's my fiddle:
http://jsfiddle.net/72o6j6r0/
You are close, the method document.getElementById() returns an HTML element by using the id of the element
HTML:
<html>
<body>
<div id="main">
This is my main content to be hidden
</div>
</body>
</html>
Javascript:
var element = document.getElementById("main");
element.classList.add("hidden");
If you want to use the class attribute to select your elements rather than the id you can use:
document.getElementsByClassName()
and then loop over the results
Here is a JSFiddle example:
http://jsfiddle.net/mko3uf9f/