相关疑难解决方法(0)

jQuery:text()和html()有什么区别?

jQuery中text()和html()函数有什么区别?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');
Run Code Online (Sandbox Code Playgroud)

VS

$("#div").text('<a href="example.html">Link</a><b>hello</b>');
Run Code Online (Sandbox Code Playgroud)

jquery dom

267
推荐指数
7
解决办法
15万
查看次数

使用 html &lt;template&gt;:innerHTML.replace

最流行的介绍说,我可以很容易克隆的HTML模板我的文档中。

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>
Run Code Online (Sandbox Code Playgroud)

然而,“模板”一词意味着您不会按原样复制粘贴,未经修改。模板意味着您要使用特定值更新某些变量。它建议使用以下方法更新节点:

var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
Run Code Online (Sandbox Code Playgroud)

是不是很完美?有 querySelector 来获取元素,以便您可以更新其属性。我只是不明白他为什么在克隆之前更新模板。但这不是我的问题。真正的问题是,在我的情况下,要更新的变量的位置是未知的。它可以是任何模板结构中的属性或innerText。我相信这是模板最普遍和最常用的用法。所以,我可以确保变量 id 在模板中是唯一的,比如这里的 #reply

<template id="comment-template">
  <li class="comment">
    <div class="comment-author"></div>
    <div class="comment-body"></div>
    <div class="comment-actions">
      <a href="#reply" class="reply">Reply</a>
    </div>
  </li>
</template>
Run Code Online (Sandbox Code Playgroud)

应该更新#reply,但作者没有解释如何做到这一点。我成功地在原始模板上使用了innerHTML,document.querySelector('#mytemplate').innerHTML.replace(id, value)但这破坏了模板供以后使用,如上所述。我未能更新克隆的文本。这可能是因为 template.clone 生成了一个没有 innerHTML 的文档片段。但是,在推动之前,我决定研究替代方案,因为我知道 innerHTML/outerHTML 不是很标准。

替代innerHTML?检查innerHTML的替代方案,但同样,他们对模板假设太多。他们不是仅仅用用户值替换一些特定的标识符,而是完全重新创建模板,这违背了模板的整个概念。一旦您在变量评估中重新创建其整个代码,模板就会失去任何意义。那么,<template>应该怎么用呢?

html javascript substitution html5-template

5
推荐指数
1
解决办法
6721
查看次数

如何用 yew 查询和更新 DOM?

有什么办法可以通过 DOM 操作吗use_node_ref?或者,如何document.query_selector()使用红豆杉在 Rust 中进行操作?

use web_sys::HtmlInputElement;
use yew::{
    function_component, functional::*, html,
    NodeRef, Html
};

#[function_component(UseRef)]
pub fn ref_hook() -> Html {
    let input_ref = use_node_ref();
    let all_editables =  input_ref.query_selector("[contenteditable]")
    web_sys::console::(all_editables)

    html! {
        <div>
            <input ref={input_ref} type="number" />
        </div>
    }
}

Run Code Online (Sandbox Code Playgroud)

目标:我有一个富文本编辑器应用程序。我有一个像这样的字符串形式的缩小的 html <h1> this is title</h1><p>hello world</>,我需要获取 DOM 并更改innerHTML以将其设置为此值。

目标2:innerHtml当用户在元素中写入内容时,我还需要更新contenteditable。例如,当用户输入时@john smith,我将创建一个<a>元素,其中包含指向 的个人资料的href链接。John smith

rust reactjs yew web-sys

2
推荐指数
1
解决办法
2357
查看次数

标签 统计

dom ×1

html ×1

html5-template ×1

javascript ×1

jquery ×1

reactjs ×1

rust ×1

substitution ×1

web-sys ×1

yew ×1