如何从另一个文件获取 HTML 元素值
how to get html element value from another file
我有两个html文件:
索引.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get( "target.html", function( data ) {
var data = $(data);
var elem = $(data.find('#tst'));
console.log(elem);
});
});
</script>
</head>
<body>
<p> This an p tag</p>
</body>
</html>
目标.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<p> This an p tag</p>
<h1 id="tst"> Test </h1>
</body>
</html>
我希望 $('#tst') 的值从目标.html到索引.html .我如何实现它?
这两个文件位于同一个基目录中。此外,$("#tst") 值将是静态的。
当我做控制台.log($(数据))时,我得到这个对象
[text, script, text, script, text, p, text, h1#tst, text]
0: text
1: script
2: text
3: script
4: text
5: p
6: text
7: h1#tst
accessKey: ""align: ""attributes: NamedNodeMap0: idlength: 1__proto__: NamedNodeMapbaseURI: nullchildElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[0]className: ""clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""draggable: falsefirstChild: textfirstElementChild: nullhidden: falseid: "tst"innerHTML: " Test "innerText: " Test "isContentEditable: falselang: ""lastChild: textlastElementChild: nulllocalName: "h1"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: textnodeName: "H1"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<h1 id="tst"> Test </h1>"outerText: " Test "ownerDocument: documentparentElement: nullparentNode: document-fragmentprefix: nullpreviousElementSibling: ppreviousSibling: textscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: -1tagName: "H1"textContent: " Test "title: ""translate: truewebkitdropzone: ""__proto__: HTMLHeadingElement
8: textlength: 9__proto__: n[0]
当我做控制台.log(elem)时,我得到这个对象
n.fn.init[0]
context: undefined
length: 0
selector: "#tst"
__proto__: n[0]
使用
.find()
获取当前匹配元素集中每个元素的后代,按选择器、jQuery 对象或元素进行筛选
试试这个:
$.get("target.html", function(data) {
var data = $(data);
var elem = data.find('#tst');
});
编辑:
由于所有immediate
子项都由 $(data)
返回,.find()
方法在这里不适用,因为我们没有parent
选择器。
创建一个dummy
div 并将该div 的html
设置为data
,以便我们可以使用 DummyDiv.find()
试试这个:
$(document).ready(function() {
$.get("target.html", function(data) {
var data = $('<div>', {
html: data
});
var elem = data.find('#tst');
});
});
相关文章:
- 如何设置html元素填充的动画
- 删除对HTML元素的拖动
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何使用JQuery在Javascript中转换字符串中的HTML元素
- 一个html元素的克隆次数太多
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 为什么我在Internet Explorer上看不到html元素
- 重新排列HTML元素的顺序并更改内容
- 使用.on动态添加jquery/js不知道的html元素
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 如何将html元素添加到tampermonkey中
- 访问html元素值javascript
- 如何在HTML元素上创建函数,而不是将元素作为参数传递
- 自定义HTML元素属性未显示-Web组件
- 让HTML元素充当停止滚动的锚点
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- 替换HTML元素中的字符
- 如何将html元素添加为生成的内容
- 如何使用JavaScript在没有html dom的情况下隐藏html元素
- 使用JS加载HTML元素