appendTo append after appendChild

本文主要是介绍appendTo append after appendChild，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

20160109

---

js

• appendChild

jQuery

• appendTo
  在被选元素的结尾插入指定内容
  （content在selector的内部的最末尾）

  $(content).appendTo(selector);
  

• append
  与appendTo同义，但位置相反

  $(selector).append(content);

• after
  在被选元素之后插入指定内容（外部）

  $(selector).after(content);

展开与收起的事件，以及插件 clamp.js

展现一段文本，由于文本内容太长，所以用省略号代替后面的内容，点击按钮以获取全部内容，或收起内容；
搜索了一下，尝试了dotdotdot.js 和clamp.js
dotdotdot.js
不知什么原因，不起作用，官网 http://dotdotdot.frebsite.nl/，由于搜到的资料较少，所以放弃使用它
clamp.js
搜到一篇简介，真的很简洁，不过好在源码不是很复杂，找到自己需要的东西了。

1. 生成一个按钮，绑定事件

// js
var btn = document.createElement("button");
btn.innerText = "展开";
btn.id = "unfold";//...//jquery
$("#wrapper").after(btn);
$("#unfold").addClass("ui-btn ui-btn-inline ui-mini");$("#unfold").on('click',(function(){unfoldClick();}));

注意
在给按钮加class时
如果在放置按钮位置，即after函数之前，addClass，无效
在放置按钮位置后，addClass，有效

click(function(){});直接这样写，对于新生成的element无效。
live()是jquery1.4的标准；on()是现在统一使用的

2. 事件函数

function unfoldClick(){$("#wrapper").html(originalText);var btn = document.createElement('button');btn.innerText = "收起";btn.id="fold";$("#unfold").after(btn);$("#fold").addClass("ui-btn ui-btn-inline ui-mini");$("#unfold").hide();$("#fold").on('click',(function(){foldClick();}));
}function foldClick(){var module = document.getElementById("wrapper");$clamp(module,{clamp:8});$("#fold").hide();$("#unfold").show();
}

3. 插件clamp.js

$(document).ready(function){var module = document.getElementById("wrapper");var wrapperText = $clamp(module , {clamp:8});/**函数clampreturn {'original': originalText, 'clamped': clampedText // 留有8行内容和省略号的字符串}*/
});

这篇关于appendTo append after appendChild的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---