javascript study notes - how to change <a href="#">url name</a>

0. Preface

Been using javascript for a while, then took a bit of time to learn jquery. But I always feel very "confused", for example, in <a href="#">url name</a>, how to write code if the "#" in href is changed. Assume how the code should be written to change the url name. Plus javascript and jquery operate slightly differently, so I'm even more "confused".

【illustrate】

In the past, I used the keyword "the difference between innerHTML and value", searched in Baidu and Google, and then carefully read the HTML document and found that innerHTML and value are actually not comparable at all. Maybe innerHTML and attributes are comparable to a certain extent.

1. Simple comparison

【innerHTML】or【innerTEXT】

innerHTML or innerTEXT refers to the element in the tag, it is simpler to say that innerHTML or innerTEXT appears in >< , in <a href="#">url name</a>, innerHTML or innerTEXT is the url name. There are some differences between innerHTML and innerTEXT. The content retrieved by innerHTML includes HTML tags and text content, such as <strong>url name</strong>, while innerTEXT can only retrieve text content - url name.

[attribute] or [value]

In <a href="#">url name</a>, the HTML a tag has an href attribute . And the attribute value is # . The value attribute often appears in form-type controls. For example <input type="text" value="Hello World">. Then the HTML input tag has a value attribute whose value is "Hello World" . Corresponding to innerHTML or innerTEXT, the attribute must appear in <> .

2. Get and set

【javascript】

【innerHTML】

【设置】 document.getElementById("id"). innerHTML ="xxx";

【获取】 var urlname = document.getElementById("#id"). innerHTML ;

【Attributes】

【设置】 document.getElementById(“id”). href ="http://xxxx";

[Get] var url = document.getElementById("id"). href ;

【jquery】

【innerHTML】

【设置】 $("#id"). html ("url name");

【Get】 var urlname = $("#id"). htm l();

【Attributes】

【设置】 $("#id").attr(" href ","www.sina.com.cn");

【获取】 var url = $("#id").attr(" href ");

3. Simple example

【Demo example】—— Demo URL Jingdong Yunqing

Figure 1 Demonstration example

【Code】

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function setURLByJS() {
    var inputurl = document.getElementById("input-url").value;
    document.getElementById("url").href = inputurl;
}
function getURLByJS() {
    var url = document.getElementById("url").href;
    alert(url);
}
function setURLNameByJS() {
    var urlname = document.getElementById("input-urlname").value;
    document.getElementById("url").innerHTML = urlname;
}
function getURLNameByJS() {
    var urlname = document.getElementById("url").innerHTML;
    alert(urlname);
}
function setURLByJQuery() {
    var url = $("#input-url").val();
    $("#url").attr("href", url);
}
function getURLByJQuery() {
    var url = $("#url").attr("href");
    alert(url);
}
function setURLNameByJQuery() {
    var urlname = $("#input-urlname").val();
    $("#url").html(urlname);
}
function getURLNameByJQuery() {
    var urlname = $("#url").html();
    alert(urlname);
}
</script>
</head>
<body>
<a id="url" href="#">URL name</a>
<br>
URL:<input type="text" id="input-url" size="35" value="http://blog.csdn.net/xukai871105">
URL Name:<input type="text" id="input-urlname" size="25" value="博客">
<br>
<p>javascript操作</p>
<button type="button" onclick="setURLByJS()">设置URL</button>
<button type="button" onclick="getURLByJS()">读取URL</button>
<button type="button" onclick="setURLNameByJS()">设置URL Name</button>
<button type="button" onclick="getURLNameByJS()">读取URL Name</button>
<br>
<p>JQuery操作</p>
<button type="button" onclick="setURLByJQuery()">设置URL</button>
<button type="button" onclick="getURLByJQuery()">读取URL</button>
<button type="button" onclick="setURLNameByJQuery()">设置URL Name</button>
<button type="button" onclick="getURLNameByJQuery()">读取URL Name</button>
</body>
</html>

4.參考资料

【1】 HTML DOM innerHTML 属性

【2】 HTML DOM value 属性

【3】 jQuery html() 方法

【4】 jQuery val() 方法

【5】 jQuery 设置内容和属性

javascript study notes - how to change <a href="#">url name</a>

Guess you like