Develop Reference

Detect click on text part of a block element

I have the following html element:
<h1>Some text</h1>
I need to detect a click and recognize whether it landed on the text part or the blank part of the element.
To preserve consistency of the rest of the app I cannot change the display of this element to inline or inline-block.
I also cannot modify the inner html of this element so splitting it into two <span> elements is not an option either.
The text inside this element is not constant and is in fact editable.
Can I detect a click only on the visible (text) part of this heading?

QUESTION "I also cannot modify the inner html of this element so splitting it into two elements is not an option either." does this mean after the fact or before the fact? i.e is it that you cannot alter the HTML or that you can't go in and mutate the HTML via JS ?
Current Solution:
I parse all elements with the .clickable identifier, remove & rebuild their text contents and place spans around them - this way i can add click listeners to the individual text/span elements - giving me access to the text itself.
const clickables = document.querySelectorAll('.clickable')
clickables.forEach(el => new Clickable(el))
function Clickable (el) {
const _handleClick = ({target}) => console.log(target.innerHTML)
const texts = el.textContent.split(/\s/)
el.innerHTML = ''
texts.forEach(t => {
const span = document.createElement('span')
span.innerHTML = `${t} `
span.addEventListener('click', _handleClick)
el.appendChild(span)
})
}
<h1 class="clickable">Some text</h1>
<h2 class="clickable">Some! more! text2</h1>

By the use of Jquery you can use the .click function to know if the h1 tag is clicked.
$('#test').click(function(){
alert("Clicked!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='test'>TEST</h1>

Selecting <p> within a div using javascript

I want to select the p tag and style it within a content class div. Here is the example HTML:
<div class="content">
<p> this is paragraph </p>
</div>
I want to select and style the p which is immediately after the div. The p has no ID or class.
How can I select it via JavaScript?

This can be done using querySelector. You did not specify minimum browser requirement.
var p = document.querySelector(".content p");
p.style.color = "red";
http://jsfiddle.net/g35ec/

You can use querySelector
document.querySelector('.content p').style.color = 'red';

if you can get access to the div, you can use
var ps = divObject.getElementsByTagName('p'); //ps contains all of the p elements inside your div
var p = ps[0]; //take the first element

to style tag use it normally as you do
in the style tag or if you use a separate css file.
Have a look at this fiddle it might help you
http://jsfiddle.net/3uUjf/
p{
background-color: cyan;
}

Javascript to change text of a span within div

My html is like this, I can only identify the div's class, there are no span' ids. I need to replace one href text and one image with some other text within those spans.
<div class ="myclass">
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle">
<span class="myspan">
<a href="http://testlink3">
<img title="test" class="imglink"></a>
</span>
</span>
<span>
Text - *This text needs to be replaced*
</span>
</div>
in the above code, I need to replace the img within the third span with a clickable text (which should take us to url) and the text within fourth span to a new text (keeping the url the same).
How can I get identify these specific spans when they are missing ids/classes?

We have 3 different things to do here:
How to replace the content inside a given element
This can be done very quickly:
$("selector").html("New text, same href");
Replace a given element with another
This can be done this way:
$("selector").replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Selecting the DOM elements
When you don't have an ID, nor a CSS class for your element, but you do know its position within another element plus some info about the element (like tagName), you can select the parent element and specify a relative position.
var myElement = $("parentElement").find("tagName:eq(position)");
Remember that this kind of selector ( "tagName:eq(position)") is zero indexed, so if you want to grab the third element, you need to tell jQuery tagName:eq(2).
So, let's say you parent element (not given in the question) is a div with a parent CSS class.
First thing you want to do is select this div.
var parent = $(".parent");
Then you want to find the Img within the third span.
var myImg = parent.find("span:eq(2)").find("img");
Now you can replace this element with the whatever you want
myImg.replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Note that jQuery allows you to pass HTML elements as a plain string.
Finally, you need to change the text inside the fourth span. This can be accomplished this way:
parent.find("span:eq(3)").find("a").html("New text, same href");

You could use document.querySelector to select an a based on the href:
document.querySelector("a[href='http://link4']").innerHTML = "The text you want to put in"
Since you're open to jQuery, this works too:
$("a[href='http://link4']").text("The text you want to put in")

var s = document.getElementsByTagName('span');
var i = spans[2].firstChild.children[1]; // here you find your img
i.parentNode.appendChild(<<your new text element>>);
i.parentNode.removeChild(img);// remove the image
var a = spans[3].firstChild; // here is your href
a.innerHTML = 'your new text';

You could use :nth-child() selector to select from the div you can identify.
More on :nth-child(): http://api.jquery.com/nth-child-selector/
Then select the img tag from the child span you found.

Is there a generic method of accessing DOM elements without an id through Javascript?

I have a <p> tag without an id attribute that I'd like to remove. Would I be able to use a generic DOM string to access this element?
<html>
<body>
<div>
<p> // yada yada
</p>
</div>
</body>
</html>
In my instance I'm trying to remove the paragraph element with jQuery by:
$(function () {
var remove = $(" /*Generic label goes here */ ").remove();
});
I thought it would be document.body.div.firstChild Is something like this possible?

You can use normal css selectors within jQuery:
$(function () {
var remove = $("body div p:first-child").remove();
});
If you just want top level divs inside body, use body > div p:first-child. if you only want p elements which are direct childs of body, use body > div > p:first-child.
Depending on what you need, you can also get all p elements and then iterate over them!

How to remove a particular html tag and its content which is inside a div, using div id by jquery?

I have the following div tag, which will be created onload by jquery. I want to remove only the span tag and its contents which is being created inside the div. How can i do this using jquery ? I have tried innerHTML but it deletes all the contents of the div with id uniform-qualification, as I want to delete only the span tag below.
<div id="uniform-qualification" class="">
<span>BCh</span>
</div>
Note : the span tag cannot be given with an id as its being created dynamically from the UI plugin

$("#uniform-qualification > span").remove();
but you'll need to provide more information if you want a more informed answer. For example, if you have more than one span but only want to remove the first one you'll need something like:
$("#uniform-qualification > span:eq(0)").remove();

To remove all span elements within the div try the following:
$('#uniform-qualification span').remove();
To remove only child span elements:
$('#uniform-qualification > span').remove();
To remove only the first child span element:
$('#uniform-qualification > span').first().remove();

$('#uniform-qualification').html('');
That'll do the trick.