impressionHtml=`<img src=${value} alt=""/>`;
 document.getElementById("wrapper").appendChild(impressionHtml);

js向父元素wrapper中的末尾添加 定义好的html，报错：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter  is not of type 'Node'.

在stackoverflow上找到很好的一个解释：

所以js是不能直接传入字符串的，但是jquery的append可以直接传入html字符串。

js操作DOM在父元素中的结尾添加子节点注意的更多相关文章

  1. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  2. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  3. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  4. JS 操作 DOM

    定义:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 节点:(例如:< ...

  5. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  6. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  7. 原生js操作Dom命令总结

    常用的dom方法 document.getElementById(“box”);//通过id获取标签    document.getElementsByTagName(“div”);根据标签名获取页面 ...

  8. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  9. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

随机推荐

  1. Java之String、StringBuilder、StringBuffer的区别

    String : 字符串常量,它们的值在创建之后不能更改.代表字符串,Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. String的值是不可变的,这就 ...

  2. 封装PHP验证码方法

    /** * 生成验证码 * @param integer $width 图片宽度 * @param integer $height 图片高度 * @param string $type 验证码类型 * ...

  3. winform 中 给DataGridView的表头添加CheckBox

    在C/S架构中,给DataGridView的表头添加CheckBox控件: 添加类:   /// <summary>       /// 给DataGridView添加全选       / ...

  4. electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

    公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实 ...

  5. 【Spark】Sparkstreaming-性能调优

    Sparkstreaming-性能调优 Spark Master at spark://node-01:7077 sparkstreaming 线程 数量_百度搜索 streaming中partiti ...

  6. How to chain a command after sudo su?

    The idea is simple, for example: alias foo='sudo su foo && cd /tmp' However, it does not exe ...

  7. IDEA下使用Maven的test命令乱码

    IDEA下使用Maven的test命令乱码的时候,加上 -Dfile.encoding=GBK 就可以解决啦   如下图所示:   或者在Maven的pom.xml文件中增加: <propert ...

  8. 基础知识：什么是ASP.NET Razor页面？

    Razor页面与ASP.NET MVC开发使用的视图组件非常相似,它们具有所有相同的语法和功能. 最关键的区别是模型和控制器代码也包含在Razor页面中.它更像是一个MVVM(Model-View-V ...

  9. 【NLP】Python实例：基于文本相似度对申报项目进行查重设计

    Python实例:申报项目查重系统设计与实现 作者:白宁超 2017年5月18日17:51:37 摘要:关于查重系统很多人并不陌生,无论本科还是硕博毕业都不可避免涉及论文查重问题,这也对学术不正之风起 ...

  10. top命令详析及排查问题使用演示

    1. top基本使用 top命令运行图 第一行:基本信息 第二行:任务信息 第三行:CPU使用情况 第四行:物理内存使用情况 buff/cache: buffers 和 cache 都是内存中存放的数 ...