Develop Reference

the reason why Conflict between plugin and javascript function occured

Few days ago I had to write code quickly and added the bad code below.
<td class="note_box_con" onclick="getElementsByTagName('a')[0].click();">
After then, when I tried to use Text editor plugin written by Javascript, I found
Text editor plugin and the function of DOM collide into each other
Now I know what was the problem and solve it. But I cannot understand what kind of risk getElementsByTagName('a')[0].click(); has.
In my incomplete view, that code is just addEventlistener function().....
what kind of risk onclick="getElementsByTagName('a')[0].click();" has?

In my understanding, its a bad practice to do it this way. I would rather suggest you to use to fetch using classname or id.
If you are using some resource that adds anchor tags to your page, this will break your logic.
Following is a simulation:
var count = 0;
function addAnchor(){
var div = document.getElementById("content");
var str = "<a href='#'>" + count++ + "</a>";
div.innerHTML = str + div.innerHTML;
}
document.getElementsByTagName("a")[0].addEventListener("click", function(){
console.log(this.innerHTML);
return false;
})
<div id="content">
Test
</div>
<button onclick="addAnchor()">Add Link</button>
<a onclick="document.getElementsByTagName('a')[0].click()"> test </a>
Also, if there is a change in DOM structure, your code will not work properly. Best use a proper selector that uniquely identifies the element.

PHP echo appears to work but doesnt show up in HTML

I am trying to use a php script to generate HTML in order to save lines and what not. I am using jQuery to call my php and then put the result into a specified div as shown below:
function createSidebarRow(div, cellNum, rowName, rowDesc) {
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc);
}
However, when this is executed the HTML is not updated on the page, I can see that the code has worked because the browser network activity confirms it. I am trying to figure out what is causing it to not update.
This is the network activity confirming the echo'd HTML.

Sorry for stating the obvious, but the div you are trying to fill up does exist with that particular id right?
If so, try this:
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc, function() {
alert('success');
});
If the id does exist (and it's unique) and you get an alert there should be no reason for it not to work.

It might be so, that the div is not yet created in the DOM. (the div that should received the html).
Are you calling createSidebarRow directly on page load?
If so, put the function call in a document ready:
jQuery(document).ready(function(){
createSidebarRow (... );
});

Turns out jQuery doesn't play ball when you include spaces in the POST URL. I removed the space and used %20 instead and all is well now. Thanks for any advice.

jquery access to element after append by variable as id

Via ajax i retrieve some json data, make it as html and append it to my page.
Here I have a problem. I cant access element by id, if id is variable.
For example, http://jsfiddle.net/f8g5e/1/
<div id="123">Hello</div>
<div id="321">Bye</div>
<div id="out"></div>
$(function(){
key = '123';
$('#' + key).hide();
$('#321').hide();
});
The simples thing is works! #123 and #321 elements are hidden. Yeah, it's pretty obviosly.
But, in my project, when I append data to page:
$('#123') //returns element
$('#' + key) //returns null
Some code:
// generating data
var htmlData = '<div id="123">Greetings!</div><div id="321">Bye bye</div>';
// appending data
$('#tweets').empty();
$('#tweets').append(htmlData);
What are the possible causes i can't access elements?
Thanks.
UPDATE
Dont know how it works in JSFiddle, but when I changed my IDs to properly names it began to work now. Thanks to all! Next time, I'll take more attention to w3c dom standarts ;) Happy New Year!

The only reason I can think of that $('#'+key) wouldn't work is because the variable key is undefined.
Note: you're not supposed to start an ID with a number according to the W3C spec. However, most browsers allow it, so I doubt this is causing your problem.
However, if you have two divs with the same ID attribute, then JavaScript will only select the first one it finds -- IDs are supposed to be unique. If this is happening, use classes instead.

You can either do this:
$(function() {
$('#321,#123').hide();
});
or you can do this:
$(function() {
var key = '123';
var doit = '321';
$('#' + key + ',#' + doit).hide();
});

Parsing using mrss

I'm trying to parse an mrss feed using jquery but am having some difficulty targeting the child element.
Code:
$(xml).find("item").each(function(){
var $item = $(this);
alert($item.find("media\\:thumbnail").text();
});
MRSS Structure:
<media:thumbnail url="http://somewebsite.com/someimage.jpg" />
UPDATE
The solution $item.find("media\:thumbnail").attr("url") works very well in Firefox but running the code in Chrome reveals an undefined value. Can someone suggest a workaround.
Thanks

You're trying to display the text() of your found nodes. The example node you include has no text at all. You want the value of the url attribute:
$(xml).find("item").each(function(){
var $item = $(this);
alert($item.find("media\\:thumbnail").attr("url"));
});
If your media:thumbnail element had something between opening and closing tags you could use text() (and you still wouldn't be getting the url value):
<media:thumbnail url="http://somesite.com/simeimage.jpg">Some text string</media:thumbnail>

Insert newline (\n) with innerHTML in pre element in IE not working?

I am facing the following problem: I have a HTML document where I want to print basic status/debug/etc messages.
So, the HTML document contains an empty pre-element whose id is out:
<body onload='init () && main();'>
<pre id='out'>
</pre>
</body>
</html>
The init() function assigns the pre element to a variable:
var out_div;
function init() {
out_div = document.getElementById('out')
return 1;
}
Then, in order to print something into the pre-div, I use this function:
function txt_out(txt) {
out_div.innerHTML += "\n" + txt
}
The newline should make sure that each invocation of txt_out is written on its own line.
This works as expected in Firefox. IE however doesn't seem to pay attention to the \n. So, is this wrong on IE's part, or am I doing something wrong?

This is a known problem in Internet Explorer. As a workaround, insert a <br> element instead of a newline character.

Doing things like element.innerHtml += something; is usually a bad practice because it makes the browser re-parse the entire contents of the element. As you add more and more data, every time it gets slower and slower. It also invalidates any references/event listeners that other pieces of code might have on its sub-elements.
Better use a div tag; something like:
<div id='out'></div>
and then append new sub-elements on the fly:
out_div = document.getElementById('out');
// add a new message
new_element = document.createElement('div');
new_element.textContent = "your message here";
new_element.className = "some_class"; // CSS class for changing the appearance
out_div.appendChild(new_element);

Change your code to:
function txt_out(txt) {
out_div.innerHTML += "<br />" + txt
}

Change to <br />