Develop Reference

How to get element without ID or Class Name using Javascript DOM

I'm developing a chrome extension for manipulating HTML elements. I got a little problem. The element that I want to manipulate is without ID or ClassName, like this:
<div style="width: 400px">
I want to manipulate the width. But there is no identifier in the tag div. How can I manipulate that tag using javascript DOM?

You can use querySelector.
Here is a simple example:
//adjust selector to target your div (more info in docs)
var div = document.querySelector('div[style="width: 100px; background-color: green"]')
//change this width to your preference
div.style.width = "700px"
<!-- This is my condition -->
<div class="wrap">
<div style="width: 100px; background-color: green">
<h1 class="h1">
Hello World
</h1>
</div>
</div>

Replace div on hover (div rollover)

I have two div with different data. I want to replace div with other on hover.
I can do this in CSS but my data have images and links. so i use image in css i can not put
on for image.
also i have 4 different images in a dive.
so i want that when use hover that area my first div should be replaced with 2nd div.
Thank you

No example given so i'm assuming.
HTML
<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>
Javascript (with jQuery)
$("#div1").on('mouseover', function() {
$("#div2").show();
$(this).hide();
});
This is not tested so try it out an see if it does what you want.

If you don't want to use javacript you can do it like this.
You can change the content of the divs.
.child-one{
display : block;
}
.child-two{
display : none;
}
.parent:hover .child-one{
display : none
}
<div class="parent">
<div class="child-one">
text of child one
</div>
<div class="child-two">
text of child two
</div>
</div>

Single page website with jQuery - Content in JS or HTML

I'm just picking up JS & jQuery and consider myself quite capable with HTML/CSS. I'm in the middle of building a single page front-end only website. I've got the layout nailed down with Bootstrap and now I'm just trying to figure out some of the functionality. My scenario is as follows:
There are 4 <div>s with text and an image in each of the 4 <div>s; and there is a <div> with class #content below it. There is a .on('click') listener for each of the #c1-4 divs and when the user clicks on a particular div, the #content div will change accordingly.
<div id="#c1" class="active-div">
<p>Text Here</p>
<img src="image.jpg">
</div>
<div id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
</div>
<div id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
</div>
<div id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
</div>
<div id="#content">
<!-- Content of the selected div goes here -->
</div>
By default, #c1 <div> is selected. The content that goes in to #content is mostly text but some icons and images too, with appropriate styling.
The Question: What is the best way to store & load content into the #content div? Based on my knowledge so far I believe the options are:
Hard-coding it into the JS and using .html() to set the content; although this would add quite a bit of HTML to the JS.
Hard-coding 4 different divs related to each of the 4 #c IDs and using .show() and .hide() accordingly.
Using .load() to load the content from another HTML document. However, I'm not sure how styling would be handled and how this will affect the display of the #content div.
I would also like to know the pros and cons of each of the above approaches and which one would be more suitable for future maintenance (e.g. adding a fifth, sixth #c numbered div to select & load content for).

In real world developers consider backend data to replace / append content based on user's clicks and it is just second thing how exactly you append / prepend / html or load your content to your div element. Not sure how you are going to hardcode different content according to the clicked button, I think in your case #2 & #3 should do the trick.
There is append / prepend actions you can use (they are self-explanatory I guess, but might be useful in some cases).
As I mentioned initially in ideal work you will do queries to your backend endpoints (databases, API etc..) and fetch content from there. Once done, you just style it accordingly using those divs and css (either inline or CSS table) things. Focus on overall construction!

There are a lot of ways to do this and a lot of JS frameworks out there that do it differently, but all of your options are appropriate in my opinion, especially given that you're using jQuery. I'll just talk a bit about your three options:
You can hard-code it into your JS, but you can also place the content in your HTML in a <script> tag and load it as a JavaScript string in jQuery, like they do for Underscore templates.
<script type="text/template" id="div-1">
<span>Hey, this is some content</span>
</script>
Then later in your JavaScript, just do $('#div-1').html() to get the contents of it, and you can stick that in your content div.
This option is also perfectly acceptable.
As long as you have all your css already applied to the document, dynamically changing the DOM won't affect its ability to apply styles. Just make sure you have all the rules in a stylesheet that is already loaded.

Expanding on my comment, here is how you could do it with hidden content divs and replacing html using .html()
$(function() {
var content = $('.active-div .content').html();
$('#content').html(content);
$('.item').click(function() {
$('.item').removeClass('active-div');
$(this).addClass('active-div');
content = $('.active-div .content').html();
$('#content').html(content);
});
});
.item {
cursor: pointer;
display:inline-block;
padding-right:10px;
}
.content {
display: none;
}
#content {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
<p>Text Here</p>
<img src="image.jpg">
<div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
<div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
<div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
<div class="content">Sample content 4</div>
</div>
<div id="content">
<!-- Content of the selected div goes here -->
</div>

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.

You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/

There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...

You can do
document.getElementsByTagName("div")[0].style.display = 'none';

Targeting the correct element with jQuery

A tooltip library is copying the dom node to insert the html inside a tooltip.
I need to target the element inside the tooltip, but the javascript is always applied to the original element.
<a class="tooltip">Open</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
I have tried using the enter callback of the tooltip, this was not working. And applying things before the html is copied by the tooltip only cosmetically works, the javascript is still looking at the original. I even tried changing the class before I apply anymore javascript. Figuring if I changed the class the original element would no longer be accessible. The class changed, but the javascript was not applied to what was inside the tooltip.
Is there a good way remove a div once it has been copied, or a better method of finding/targeting the correct element.
$(this).find("div.scroll").test();
EDIT:
...Before...
<div id="main-content" class="scroll">
<div class="Content">
...After...
<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
<div id="main-content" class="scroll">
<div class="Content">
....
The this was a part of the enter callback for the tooltip library:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({ content: tip_html, enter: function(){
$(this).find("div.scroll").test();
}
Also tried using,
$("#main-content.scroll", "#tiptip_content").test();
UPDATE:
As people mentioned naming the parent div like I was should of worked, here's an example of how i'm not able to target inside the tooltip.
jsfiddle.net/mstefanko/pUm5V/24
//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");
Blue doesn't work, red does. I feel like both lines should work.

Found the main cause of my issue. The following lines in the plugin:
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
the enter call was being called before any of the tooltip content was in the DOM, as much as the wrappers for the tooltip existed, calling main-content when it wasn't in the tooltip yet will obviously fail to work. Not sure i've completely solved my issue, but reversing these lines fixes the question at hand.