We Keep Coding

How to locate element which is called after JS script is executed and displayed

<div class="inline-check">
span class="ic-check" style="display: inline;">
Above is sample of the HTML which i am trying to find using any type of locater. It is text box which accept numbers and then shows a green tick mark that the input is accepted. Element style ="display: none;" turn to inline in HTML but when tried to look through xpath it is always visible like above.
I have tried finding the element using xpath and getting size of it and verify if it come as True or False.
but as the element is always present it passes even if the green tick is not displayed.
What technique should be used to find such elements.

Have you tried using the isDisplayed() method from WebElement https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html#isDisplayed-- ? It's basically a built in function that checks the style attribute.
So you could try doing something like this:
WebElement checkmark = driver.findElement(By.className("ic-check"));
assertTrue(checkmark.isDisplayed());
Hope this helps.

div in headline tag autocloses

I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???

CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit

img tag within title attribute

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net
I viewed the page's source and got:
<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
<img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
<div style="float: left; width: 300px">
<a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
<p>
Nhân vật chính Yuzuko, ngay ngày đầu tiên chuyển trường đã đụng mặt và không mấy cảm tình với Mei - hội trưởng hội học sinh ở trường mới, trong ...
</p>
</div>'>
Citrus (Saburouta)</a>
but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?

As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.
For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like
a:hover + div {
display: block !important
}
this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.
Here is the demo: http://jsfiddle.net/4WZvL/

To quote the accepted answer to the question you linked to
You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.
They use a custom tooltip look-a-like effect.

The image tag in that title attribute is encoded. Given this, you can place any string you want in the title tag of an anchor, it doesn't mean it's a good idea at all though. You can use javascript to pull the proper image url from any data attribute you set and achieve the same effect so long as you know how to use that url in a logical way. At least that way you would be following some kind of standard and not just abusing the intention of html standards to pull off some fancy tricks.
Juhana answered your question. But to extend the notion, you can easily use data attributes, id's, and classes to set hidden or otherwise referenced html elements for whatever you need. You can hide elements with css and then unhide them with javascript if the desired effect is to pop up that block with the images from the link you provided.
Someone may provide an example if you specify your exact needs and show what you have tried to solve it yourself.

That HTML isn't valid, and although it might be possible it doesn't mean you should do it. Some browsers probably won't display the image correctly.
Use one of the thousands of Javascript tooltip plugins instead. Here's loads for jQuery: https://www.google.co.uk/search?q=jquery+tooltip+plugin

Adding style to untagged text

I have html that I can't change (as its coming from a clients database)
something like below. as you can see it is not wrapped in a tag, and I can't select the div, as I only want to target stuff under the sub_header (if it's present) with white-space:pre-line;
<span class="sub_header">Example:</span>
<br/>
Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div
</div>
Is this even possible?

$('div.container').css('white-space', 'pre-line');
$('div.container span.sub_header').css('white-space', 'normal');
That code should apply the CSS to the parent div (which I assumed has a class of container but change it to whatever) but not the child span. There are more elegant ways to do it (get inner content, exclude the span, then wrap it in another div styled as you need) but this will do in a jiffy assuming they are all in this format.

looking for something like this? http://jsfiddle.net/pKyG7/4/
<div>
<span class="sub_header">Example:</span><br/>
<div style="font:arial; font-size:26px; white-space:pre-line;">Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div.</div>
</div>

Here's a jQuery solution: http://jsfiddle.net/9PzeS/
$($('.sub_header + br')[0].nextSibling).wrap('<span style="white-space:pre-line"></span>');
Not sure if it's ideal and needs some error handling, but it seems to work.
Edit - Slightly more readable version:
var textNode = $('.sub_header + br')[0].nextSibling;
$(textNode).wrap('<span style="white-space:pre-line"></span>');
$('.sub_header + br')[0] selects the br tag in your example and gets the dom node. nextSibling is a vanilla js property that selects the next sibling, including text nodes.
I then wrap that with a span with the correct style.

jQuery appended text is invisible

I'm trying to create a couple of buttons above a textarea to insert some HTML code -- a VERY poor-man's HTML editor. I have a couple of INPUT elements, and I'm using jQuery to set a click handler that will call's jQuery's append() or html() or text() functions.
The handler fires, it shows a debug alert(), but the text I'm trying to append doesn't show up in the textarea. When I inspect the textarea in Firebug, I see the text I'm appending as a child of the textarea -- but it's dimmed, as when an element's style is set to display:none. But Firebug's CSS inspector doesn't show any change to the display or visibility properties.
When I set the click handler to 'append()', and then click multiple times, in Firebug I see the text being added over and over again -- but each new chunk is still invisible. If I choose 'Edit HTML' in Firebug and then type some chars next to the appended text, the entire text block -- the text added by jQuery and the stuff I added in Firebug -- suddenly appear.
This also happens if I don't use a click handler, but call my append function using an inline handler like onclick="javascript:insert('bold');"
Anyone have any idea why the appended text is not displayed?
Here's the relevant code:
The HTML:
<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />
<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>
The Javascript:
function insert( cmd ) {
switch ( cmd ) {
case 'bold':
$('#PersonalGreeting').append('<b>bold text here</b>');
break;
}
}

I would guess that jQuery is trying to append HTML DOM elements to the textarea.
Try using the val method to get and set the textarea's value, like this:
$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

The basic problem is that you can't put HTML inside a <textarea>. In fact, you can't append HTML elements to one at all. You could use the .val() method to change the text shown inside, but that won't make it bold. That will just make it have <b> showing as part of the text.
An off-the-shelf WYSIWYG editor like TinyMCE is free and easy to implement. Rather than reinvent the wheel (which is a lot harder than it might look), try an existing wheel out.

SLaks and VoteyDisciple are correct. You're usage of append is faulty as you are perceiving it as a string function.
From http://docs.jquery.com/Manipulation/append
Append content to the inside of every
matched element. This operation is the
best way to insert elements inside, at
the end, of all matched elements. It
is similar to doing an appendChild to
all the specified elements, adding
them into the document.
Reinventing the wheel on this one is likely more headache than its worth unless this is an attempt to create a superior, competing product or for your own experimentation.
Also, I would shy away from use of obtrusive JavaScript as you have shown in your example with onclick='javascript:insert("bold")' embedded in the input element. Instead, you'll have a more elegant solution with something like the following:
HTML
<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >
JavaScript (not tested)
$(document).ready(function() {
var textarea = $('#PersonalGreeting')
$(".editor-command").each(function(i, node) {
textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
});
});

If the main issue is the textarea not being visible, I would try this:
$('#PersonalGreeting').append('<b>bold text here</b>').show();
Might be worth a shot.
edit: In the vain of not trying to reinvent the wheel, I've had success with WYMEditor

You could do this:
$('#PersonalGreeting').append('[b]bold text here[/b]');
But that won't actually render the text as bold. To be honest I'm not actually sure how to render text as bold inside a textarea, I imainge some js trickery.